Electrolux_blog性能优化策略
图编辑器性能 = 少渲染节点 × 轻量节点组件 × 稳定引用 × 批量变更。
1. 节点级
| 策略 | 说明 |
|---|---|
React.memo 自定义 node | 避免父 store 更新导致无关节点重绘 |
稳定 nodeTypes / edgeTypes | 放组件外或 useMemo |
| 节点内少订阅整图 | 用 props 传入必要字段 |
onlyRenderVisibleElements | 只渲染视口内（视版本 API） |
2. 数据级
| 策略 | 说明 |
|---|---|
applyNodeChanges 批量 | 一次拖拽一轮 changes |
避免每次 setNodes([...nodes]) 全拷贝 | 用 change API |
| 大图的 id 索引 | 关注版本是否优化 lookup |
3. 边与路径
- 边数极大时简化
type、减少动画。 - 复杂路径计算放 worker 或降级 step 线。
4. 受控模式陷阱
父组件每次 render 新建 nodes 数组 → 全图刷新。应 只在 change 时更新。
5. 与 Zustand 通用建议一致
selector 细粒度、useShallow 多字段打包；见 Zustand 07。
6. 社区议题（参考）
- PR #3668 NodeRenderer 优化
- Issue #4239 虚拟化 RFC
- Issue #4976 批量更新时序
7. 总结
先 Profiler 看是 节点组件慢 还是 更新太频；再对症 memo / 可见区 / 变更合并。