Electrolux_blog渲染机制详解
渲染路径：store 中的 nodes/edges → 按 viewport 变换 → NodeRenderer / EdgeRenderer 映射到自定义或默认组件 → SVG/HTML 层绘制。
1. 节点渲染
| 步骤 | 说明 |
|---|---|
| 遍历可见 nodes | 可结合 onlyRenderVisibleElements / 虚拟化 RFC |
查 nodeTypes[type] | 无则 default |
| 定位 | position + width/height；父节点 parentId 影响坐标系 |
| 选中/拖拽态 | 来自 store，影响 class 与 z-index |
不要在每次 render 里新建 nodeTypes 对象，否则全量重挂载。
2. 边渲染
| 点 | 说明 |
|---|---|
edgeTypes | 与 nodes 类似 |
| 路径 | system 计算 bezier/step/smooth step 等 |
sourceHandle / targetHandle | 决定锚点 |
边通常在节点层之下或之上由 CSS 控制；更新边比更新节点便宜，但仍应稳定 edges 引用。
3. Viewport 与坐标
- 屏幕坐标 ↔ 流图坐标：经 viewport transform（system / d3-zoom）。
- 节点
position是流坐标；缩放不影响逻辑位置，只影响显示。
4. ConnectionLine
拖拽连线过程中，临时边由 ConnectionLine 组件绘制，不落库到 edges 直到 onConnect。
5. 与 React 并发
重渲染来自 store 订阅；极大规模图需 memo 自定义节点、减少 props 引用变化、开启可见区域裁剪。
6. 总结
渲染 = 类型映射 + 坐标变换；性能瓶颈多在 自定义节点过重 与 全量 nodes 数组替换，见 05。