LogicFlow中React自定义节点拖拽时的重复渲染问题解析

问题现象

在使用LogicFlow进行React自定义节点开发时，开发者遇到了一个典型的问题：当通过Portal方式渲染自定义React节点组件，并使用拖拽功能将节点添加到画布时，系统会生成重复的DOM元素并导致React的key重复警告。

具体表现为：

1. 当用户开始拖拽但尚未释放鼠标时，画布中就已经创建了一个虚拟节点
2. 鼠标释放时，系统会再次创建相同ID的节点
3. 控制台出现"Encountered two children with the same key"的警告

问题根源分析

经过深入分析，这个问题源于LogicFlow的React节点注册模块(react-node-registry)中的一个关键实现细节。在ReactNodeView类中，节点ID的处理方式存在缺陷：

1. 当前实现直接使用了model.id作为React组件的key
2. 在拖拽过程中，LogicFlow会为同一个节点创建多个实例
3. Portal机制在管理这些实例时没有正确处理生命周期

技术解决方案

针对这个问题，可以采用以下解决方案：

自定义ReactNodeView实现

通过继承HtmlNode类并重写关键方法，可以解决这个重复渲染问题：

export class CustomReactNodeView extends HtmlNode {
  getText() {
    return null;
  }

  protected targetId() {
    return `${this.props.graphModel.flowId}:${this.props.model.id}`;
  }

  componentWillUnmount(): void {
    Portal.disconnect(this.targetId());
    super.componentWillUnmount();
  }

  setHtml(rootEl: SVGForeignObjectElement) {
    const { model, graphModel } = this.props;
    const key = this.targetId();

    let el = rootEl.querySelector(".custom-react-node-content");
    if (!el) {
      el = document.createElement("div");
      el.className = "custom-react-node-content";
      rootEl.appendChild(el);
    }

    const { component: Component } = reactNodesMap[model.type];
    Portal.connect(
      key,
      createPortal(
        createElement(Component, {
          node: model,
          graph: graphModel,
        }),
        el,
        key
      )
    );
    model.updateStyles({
      height: el.clientHeight,
    });
  }
}

关键改进点

1. 唯一ID生成：通过组合flowId和model.id创建全局唯一的targetId
2. 生命周期管理：在componentWillUnmount中正确断开Portal连接
3. Portal连接：使用唯一的key确保React能够正确识别和管理组件实例

最佳实践建议

1. 避免直接使用model.id：始终为React组件创建复合键
2. 完善生命周期管理：确保组件卸载时清理所有资源
3. 样式动态更新：在setHtml方法中根据实际内容高度更新节点样式
4. 错误边界处理：为自定义节点组件添加错误处理机制

总结

LogicFlow作为一款优秀的流程图编辑框架，在React集成方面提供了强大的能力。通过理解其内部机制并针对性地解决这类渲染问题，开发者可以构建更加稳定和高效的可视化应用。本文提供的解决方案不仅解决了当前的key重复问题，也为处理类似的前端渲染问题提供了参考思路。