跳到主要内容

React Diff 算法

React 的 Diff 算法是其高效更新 DOM 的核心机制之一。当组件状态变化时，React 生成一个新的虚拟 DOM 树，并将其与旧的虚拟 DOM 树进行比较，以确定实际 DOM 需要进行的最小化更新。这一过程称为协调（Reconciliation）。

React 的 Diff 算法基于三个核心假设来优化比较过程：

  1. 元素类型的比较
  • 不同类型的元素会产生不同的树：如果两个元素属于不同的类型（例如，一个是 <div> 而另一个是 <span>），React 会销毁旧树并从头开始构建新树。
  • 相同类型的元素仅比较属性：如果两个元素属于相同的类型，React 会保留 DOM 节点，并仅比较和更新有变化的属性。
  1. Keys 的作用
  • Keys 应该是稳定、可预测且唯一的：在处理动态子元素列表时，为每个子元素分配一个唯一的 key 可以帮助 React 识别哪些元素是新增的、修改的或删除的。这大大提高了性能，尤其是在列表的重排时。
  1. 子元素的比较
  • 只比较同一层级的子元素：React 只会对同一父元素下的子元素进行比较。如果 DOM 结构发生了变化，比如元素被移动到了不同的位置，即使子元素没有变化，React 也可能会销毁并重新创建该元素。

Diff 算法的工作流程​

  1. 比较根节点：从根节点开始，根据元素类型进行处理。如果元素类型不同，则完全替换整个树；如果类型相同，保留 DOM 节点，并递归地比较子节点。
  2. 处理子节点：
  • 对于有 key 的子元素，通过 key 来匹配新旧两个集合中的子元素。
  • 对于没有 key 的子元素，按顺序逐个比较。
  1. 更新阶段：根据 Diff 算法的比较结果，确定需要进行的操作（添加、删除、移动、更新）。

React 的 Diff 算法通过智能的比较策略（比较元素类型、使用 keys 识别子元素、仅比较同级子元素），使得 DOM 更新变得更加高效。这种优化减少了不必要的 DOM 操作，提升了应用的性能和响应速度。然而，Diff 算法并不是完美无缺的，正确使用 key 和避免跨层级的大规模 DOM 结构变化是保证性能的关键。

React 为什么每次都要从根节点比较​

React 的更新机制确实基于从根节点开始的比较逻辑，这是因为 React 采用自顶向下的渲染和更新策略。

当组件的状态（state）或属性（props）发生变化时，React 会从根组件开始重新渲染整个组件树。然而，这并不意味着每次更新都会导致整个 DOM 树的重新构建。React 通过虚拟 DOM 和高效的 Diff 算法来最小化实际 DOM 的更新。

更新过程的关键点：

  1. 虚拟 DOM：React 维护了一个虚拟 DOM 的树结构，这使得 React 可以在内存中快速执行 Diff 操作，而不是直接操作昂贵的 DOM。
  2. Diff 算法：当组件状态或属性变化时，React 会创建一个新的虚拟 DOM 树，并与上一次渲染的虚拟 DOM 树进行比较。这个比较过程称为协调（Reconciliation）。React 的 Diff 算法尽量减少需要更新的 DOM 节点数量。
  3. 更新粒度：虽然 React 从根组件开始比较，但它并不总是重渲染整个应用。React 只会更新那些实际发生变化的部分。例如，如果某个子组件的 props 没有变化，即使父组件重新渲染，该子组件也不会进行不必要的重新渲染。
  4. Keys 的重要性：在处理列表和动态子组件时，为每个子组件分配一个稳定的 key 可以帮助 React 更快地识别和比较变化，避免不必要的重新渲染。
  5. shouldComponentUpdate 和 PureComponent：React 类组件可以通过实现 shouldComponentUpdate 方法来优化渲染性能，该方法返回 false 时可以阻止组件的更新。

另外，通过继承 React.PureComponent 而不是 React.Component，React 会为你自动实现浅比较的 shouldComponentUpdate，进一步减少不必要的渲染。