react diff 原理

React 的 diff 算法是为了减少对真实 DOM 的操作次数，提高性能而设计的。

React 使用虚拟 DOM（Virtual DOM）来表示真实 DOM 树的状态。在每次更新组件时，React 会生成一颗新的虚拟 DOM 树，并与上一次更新时的虚拟 DOM 树进行比较，找出需要更新的部分。

React 的 diff 算法大致分为以下几个步骤：

1. 对比根节点：React 首先比较新旧虚拟 DOM 树的根节点。如果根节点不同类型，React 将完全替换整个子树；如果根节点相同类型，React 将继续对比子节点。

2. 对比子节点：React 会逐层对比新旧虚拟 DOM 树的子节点。React 使用唯一的 key 属性来标识列表中的每个子节点，并且只在同级节点中进行比较。对于同级节点，React 会根据 key 和类型进行比较，尽量复用已存在的 DOM 节点。如果某个子节点在新旧虚拟 DOM 树中的相同位置，且其 key 和类型相同，则认为是相同节点，不进行更深层次的比较。如果某个子节点在新旧虚拟 DOM 树中的相同位置，但其 key 或类型不同，则认为是不同节点，需要替换或重新创建。

3. 递归对比子节点：如果某个同级节点是相同节点，React 将继续递归对比其子节点。React 会记录新旧虚拟 DOM 树中相同位置的第一个子节点为起始点，并向右依次对比每个子节点。当遇到不同节点时，则停止对比该节点及其后续节点，继续执行步骤 2。

4. 更新和删除节点：根据比较结果，React 可以确定需要更新、替换或删除的节点。对于需要更新的节点，React 会更新其属性和内容。对于需要替换的节点，React 会创建新的 DOM 节点来替换旧节点。对于需要删除的节点，React 会从真实 DOM 中移除对应的节点。

通过以上步骤，React 可以最小化对真实 DOM 的操作，只更新或替换需要变化的部分，提高了性能。

需要注意的是，虚拟 DOM 的对比算法并不是完全高效的，尤其在处理大规模列表时可能出现性能问题。为了进一步优化性能，可以使用 key 属性来指定每个列表项的唯一标识，避免不必要的节点重新创建和对比。此外，还可以使用 shouldComponentUpdate 或 React.memo 等方式手动控制组件的更新过程。