react是如何diff的
React 的 Diff 算法原理
React 的 Diff 算法基于两个核心假设：
- 跨层移动的组件极少，通常 DOM 结构是稳定的，跨层级移动的情况较少。
- 相同类型的组件生成相似的树结构，不同类型的组件会生成不同的树结构。
基于这些假设，React 采用分层比较的策略，从根节点开始逐层比较虚拟 DOM 树。
Diff 算法的比较策略
树比较
React 会对新旧虚拟 DOM 树进行逐层比较。如果发现某一层的节点类型不同（例如从 div 变为 span），会直接销毁整个子树并重建新的子树。
列表比较（Key 优化） 对于列表节点的比较，React 会尝试复用相同 Key 的节点。如果没有提供 Key，React 会默认使用索引（index）作为 Key，但这可能导致性能问题或渲染错误。
Diff 算法的具体步骤
逐层比较 React 从根节点开始，递归比较子节点。如果节点类型不同（例如组件类型或标签名不同），会直接卸载旧节点并挂载新节点。
节点类型相同
如果节点类型相同，React 会保留 DOM 节点，仅更新节点的属性和样式。对于组件节点，会更新组件的 props 并触发生命周期方法（如 componentDidUpdate）。
列表节点的优化 对于列表节点，React 会尝试通过 Key 匹配新旧节点。如果 Key 匹配，会复用节点并更新内容；如果不匹配，会创建新节点或删除旧节点。
Key 的作用
Key 帮助 React 识别哪些节点是稳定的、哪些需要更新。稳定的 Key 可以减少不必要的 DOM 操作，提升性能。例如：
<ul>
{items.map(item => <li key={item.id}>{item.text}</li>)}
</ul>如果 item.id 是唯一的，React 可以高效地复用或重新排序节点，而不是重新渲染整个列表。
性能优化建议
- 避免使用索引作为 Key，除非列表是静态的且不会重新排序。
- 保持 Key 的唯一性和稳定性，避免随机生成 Key（如
Math.random()）。 - 减少跨层级的节点移动，尽量保持 DOM 结构的稳定性。
通过这种策略，React 能够在保证性能的前提下，最小化 DOM 操作的开销。
