更新节点 (Updating Nodes)

在 yh-flow 中，节点是完全响应式的。这意味着当您通过代码修改传入组件的 nodes 数组数据（例如修改坐标、样式、标签或业务元数据）时，画布视口将实时同步更新。无需手动调用 refresh() 或 render() 方法。

实时属性绑定示例

在该示例中，我们演示了如何通过外部表单动态绑定节点的标签和背景颜色。点击下方的图表节点以启用编辑面板。

标签:

颜色:

➔ 选择一个节点开始编辑

节点 A

节点 B

响应式属性更新

1. 状态管理：由于 yh-flow 出于性能优化原因不再进行全量深度追踪（Deep Watch），您必须通过全新的对象/数组引用替换来触发属性更新（不可变更新范式）。例如：nodes.value = nodes.value.map(n => n.id === id ? { ...n, data: { ...n.data, label: 'Value' } } : n)。
2. 位置偏移：要通过编程方式移动节点（例如用于自动布局或对齐），请同步更新新的节点对象数组覆盖旧的 nodes。
3. 高频更新：对于拥有数千个节点的大型图表，我们暴露了内部的 flowInstance.updateNode(nodeId, data) 方法用于极其高频和大规模的局部属性修改，以避免产生整个数组重构或不必要的应用层重绘开销。