概念
调和 : 协调, 协调过程的官方定义: VirtualDOM是一种编程概念, 在这个概念中, UI以一种理想化的, 或者说 虚拟的 表现形式保存在内存中, 并通过 ReactDOM 等类库使之与 真实的DOM 同步. 这个过程叫做协调(调和)
调和是将虚拟DOM映射到真实DOM的过程, 严格来说并不能和Diff画等号
调和是使一致的过程
Diff是找不同的过程,
Diff只是调和的一个环节
根据Diff的实现形式不同, 调和过程被划分为React 15: 栈调和 以及 React 16: Fiber 调和
过程
在React中,“栈调和”(Stack Reconciler)是指React的虚拟DOM(Virtual DOM)和渲染引擎之间的协作过程,用于更新DOM树。它的过程如下:
React通过调用组件的render方法,生成一个虚拟DOM树。
React将新的虚拟DOM树和旧的虚拟DOM树进行比较,找出需要更新的部分。
React将需要更新的部分转换成DOM操作,然后将它们添加到一个更新队列中。
React通过调用requestIdleCallback等待浏览器空闲时间,然后开始执行更新队列中的DOM操作。
React将更新队列中的DOM操作按照顺序依次执行,更新DOM树。
在这个过程中,React使用了一种叫做“协调”(Reconciliation)的算法,用于比较新旧虚拟DOM树的差异。这个算法的核心思想是,将虚拟DOM树转换成一个树形结构,然后递归地比较每个节点的属性和子节点,找出需要更新的部分。这个算法的时间复杂度是O(n),其中n是虚拟DOM树的节点数。
总的来说,“栈调和”是React的核心机制之一,它保证了React的高效性和可靠性,使得React能够快速地更新DOM树,同时保持应用程序的正确性。