我对 React Reconciliation 的理解正确吗？

Question

从我整天翻阅不同教程的总结来看，react 执行 dom 更新的方式似乎是通过以下过程。

1. 用户以某种方式与真实的 DOM 交互，触发 DOM 事件，事件的处理程序最终触发一个函数，告诉响应更新。
2. React 获取虚拟 dom（此时也代表真实 dom）的“快照”，然后继续使用更新的状态和道具创建新的虚拟 dom。
3. React 对快照和新的虚拟 dom 进行比较，然后只修改需要修改的部分 dom 以匹配新的虚拟 dom。

我对这个过程的理解是否正确，至少在简单的层面上？

Answer 1

几乎是正确的，我认为这里的错误是没有“新的虚拟DOM”，React 总是保存/使用/重用两个副本 - 真实 DOM 的 VDOM 表示。

• (A) VDOM 有助于对真实 DOM 进行更改（根据此 VDOM，React 将对 DOM 进行最小的更改）。

• (B) VDOM 表示对真实 DOM 所做的所有更改（您称之为“快照”，此 VDOM 将与 A 进行比较）。

所以像你一样总结这个过程：

1. 如果 VDOM 不存在，则创建一个 (VDOM A)。
2. 用户以某种方式与真实的 DOM 交互，触发 DOM 事件，事件的处理程序最终触发一个函数，告诉响应更新。
3. React 创建（或重用）其中一个 VDOM (B)（此时它也是真实 dom 的代表）。
4. React 区分 VDOM B 与 VDOM A，然后只修改需要修改的部分 VDOM (A)。
5. React 使用 VDOM A 更新真实 DOM。

注意3. 部分React 使用diff algorithm，这有点只是比较元素的keys 和道具（浅比较）。