--- title: What is React Diffing Algorithm ? author: powerfulyang date: 2022-11-22 public: true summary: What is React Diffing Algorithm ? tags: - React - Document - Diff --- React implements a heuristic O(n) algorithm based on two assumptions: 1. Two elements of different types will produce different trees. 2. The developer can hint at which child elements may be stable across different renders with a `key` prop. React的diff算法是为了找出两棵虚拟DOM树之间的最小差异。完全比较两棵树的时间复杂度是O(n^3)，但这对于性能要求高的前端应用是不可接受的。因此，React进行了一些优化。核心优化点： 1. **只比较同一层级**：React不会跨层级进行对比。例如，它不会试图将一个父元素的子元素与另一个父元素比较。这简化了问题并将算法的时间复杂度降低到O(n)。 2. **key属性**：在列表中，React使用`key`来帮助识别元素。当元素的位置发生改变时，有了`key`，React可以准确地知道哪些元素是新增的、哪些被移动了、哪些被删除了。简化后的答案：React的diff算法的时间复杂度是O(n)，主要是因为它只在同一层级进行元素的比较，并利用`key`来快速识别和比较列表中的元素。 ## Diffing 算法 > https://zh-hans.reactjs.org/docs/reconciliation.html#the-diffing-algorithm > https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm > https://beta.reactjs.org/learn/preserving-and-resetting-state state 是按位置存的，如果是同级别同类型元素还要考虑 key 的影响 ### 对比不同类型的元素当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树。举个例子，当一个元素从 `` 变成 ``，从 `

` 变成 ``，或从 `

标签: 调和器

笔记(1)

React Diff 算法详解与优化