虚拟 dom 与状态驱动视图的一致性需通过状态追踪、vnode 快照生成、结构化 diff 和原子化 dom 同步四环节保障；任一环节失效都会导致界面更新不精准、不及时或产生副作用。
虚拟 DOM 树与状态驱动视图的逻辑一致性，本质是“数据变了，界面是否精准、及时、无副作用地跟着变”。它不是自动成立的，而是靠框架在渲染管线中对状态变更、vnode生成、diff比对、真实DOM同步这四个环节的严密设计来保障。
状态变更必须可追踪、可收敛
状态不能是散落在各处的变量或闭包私有值。它需要被纳入统一的响应式系统（如 Vue 的 reactive + effect，或 React 的 useState + 组件函数重执行），确保任意一次状态修改都能触发确定的更新入口。否则，状态变了但视图不更新，一致性就断了。
- 避免直接修改对象属性而不通知响应系统（例如 Vue2 中对数组索引赋值、对已有对象新增属性）
- React 中不要在事件处理器外直接修改 state 变量，必须走 setState 或 dispatch
- 异步操作后更新状态，需确认回调发生在响应式上下文内（如 Vue 的 onMounted 内、React 的 useEffect 依赖数组正确）
vnode 必须忠实反映当前状态快照
每次状态变化后，框架要基于最新状态完整生成一棵新的虚拟 DOM 树。这棵树不是增量修补的，而是全量声明式的快照——它不记录“怎么变”，只描述“此刻应该长什么样”。只有这样，diff 才有可靠基准。
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
- 组件 render 函数或 JSX 返回值必须纯函数化：相同输入（props + state）必得相同 vnode 结构
- 避免在 render 中读取非响应式外部变量（如 Date.now()、Math.random()），否则 vnode 不稳定，diff 失效
- 列表渲染必须提供稳定 key，否则 vnode 节点复用逻辑错乱，导致状态与 DOM 错位（比如输入框失焦、动画中断）
diff 过程需兼顾语义与性能边界
diff 不是简单比对对象引用，而是按层级+类型+key 做结构化比对，并在关键节点保留状态映射关系（如 input 的 value、focus 状态）。一致性受损常发生在 diff 跳过本该处理的分支，或错误复用了带内部状态的节点。
- 元素类型不同（如 div → span）必须卸载重建，不能强行 patch 属性
- 组件类型变更时，应销毁旧实例并初始化新实例，而非尝试复用内部状态
- 自定义指令或 ref 操作需在 patch 后生命周期钩子中执行，避免在 diff 中间态读写真实 DOM
真实 DOM 同步需原子化、防干扰
从 vnode 差异到真实 DOM 更新，必须批量、有序、不可中断。浏览器的回流/重绘开销大，若更新分散在多个任务中，不仅慢，还可能因中间态暴露导致视觉闪烁或交互异常。
- 框架通常将更新收集到 microtask（如 Promise.then）或 requestIdleCallback 中统一 flush
- 表单类元素（input/select）需特殊处理 value 和 checked 属性，确保虚拟值与真实输入值始终对齐
- 避免在 mounted 或 useLayoutEffect 中立即读取 offsetHeight 等布局属性，此时 DOM 可能尚未完成 patch
