G6 5.0 自定义节点开发中的构造函数执行顺序问题解析

问题背景

在 G6 5.0 版本中，开发者在使用自定义节点功能时可能会遇到一个特殊的问题：当继承 BaseNode 类创建自定义节点时，在构造函数执行过程中，基类会在子类完全初始化前就调用绘制方法，导致访问未初始化的属性时出现异常。

问题现象

具体表现为：在自定义节点的构造函数中，当调用 super() 之后、完成子类特有属性初始化之前，基类就会触发 drawKeyShape 方法的调用。此时如果 drawKeyShape 方法依赖于子类特有的属性或方法，就会因为这些属性尚未初始化而抛出异常。

技术原理分析

这个问题源于 G6 5.0 的元素基类设计模式。BaseNode 继承自 BaseShape，而 BaseShape 在构造函数中会立即调用 render 方法，进而触发 drawKeyShape 的执行。这种设计是为了确保元素在创建后立即具备可视化表现。

从面向对象的角度看，这种设计打破了传统的"先完全构造对象再使用方法"的模式，而是采用了"构造即渲染"的理念。这种设计在图形库中较为常见，目的是提高性能并简化API调用流程。

解决方案

方案一：遵循基类设计模式

1. 直接覆写绘制方法：只需覆写 drawKeyShape 方法，将主图形绘制逻辑放在其中。这种方式完全遵循基类的绘制流程。

class CustomNode extends BaseNode {
  drawKeyShape(attributes, container) {
    // 自定义绘制逻辑
  }
}

2. 扩展绘制方法：在保持原有绘制流程的基础上，添加额外的绘制逻辑。

class CustomNode extends Circle {
  render(attributes, container) {
    super.render(attributes, container);
    this.drawCustomShape(attributes, container);
  }

  drawCustomShape(attributes, container) {
    // 额外绘制逻辑
  }
}

方案二：完全自定义绘制流程

如果需要完全控制绘制流程，可以覆写 render 方法，不调用 super.render，自行实现完整的绘制逻辑。

class CustomNode extends BaseNode {
  render(attributes, container) {
    // 完全自定义的绘制流程
    this.myDrawMethod1(attributes, container);
    this.myDrawMethod2(attributes, container);
  }
}

自定义属性处理

对于需要在节点中使用的自定义属性，可以通过以下方式传递和使用：

1. 在创建 Graph 时定义节点样式：

const graph = new Graph({
  node: {
    style: {
      customProp: (d) => d.data.customField
    }
  }
});

2. 在自定义节点中获取这些属性：

class CustomNode extends BaseNode {
  drawKeyShape(attributes, container) {
    const { customProp } = attributes;
    // 使用自定义属性
  }
}

最佳实践建议

1. 尽量使用方案一：遵循框架设计模式，减少潜在问题
2. 避免在构造函数中定义关键方法：将关键逻辑放在绘制方法中
3. 合理使用自定义属性：通过样式属性传递动态数据
4. 考虑绘制性能：复杂的自定义节点应优化绘制逻辑

总结

G6 5.0 的这种设计虽然与传统面向对象模式有所不同，但为图形渲染提供了更高的效率和更简洁的API。理解这种设计理念后，开发者可以更高效地创建自定义节点，同时避免初始化顺序导致的异常问题。通过合理使用绘制方法覆写和自定义属性传递，可以实现各种复杂的节点可视化需求。