说说react diff的原理是什么？

React 的 diff 算法是用来比较虚拟 DOM 树的算法，它通过比较新旧两颗虚拟 DOM 树的差异，找出最少的 DOM 操作来更新实际 DOM，以提高性能。

React diff 算法的原理如下：

1. 树的比较：首先，React diff 算法会比较新旧两个虚拟 DOM 树的根节点。如果根节点类型不同，则整颗树需要被替换，生成新的 DOM 元素；如果类型相同，则会进行下一步的深度比较。

2. 组件的比较：在比较过程中，React 会优先比较组件的类型。如果新旧组件类型相同，则会继续比较组件的 props 属性和 children 子元素；如果组件类型不同，则整个组件及其子树会被完全替换。

3. 列表的比较：当比较列表时（例如数组或子元素列表），React diff 算法会使用一种称为“key”的标识来判断哪些元素是新增、删除或移动的。通过按照 key 进行比较，React 可以在不重新渲染所有元素的情况下确定哪些元素需要更新和重新排序。

4. 更新策略：React diff 算法会使用三种基本策略来最小化 DOM 操作：

   • 插入操作：如果某个元素在新的虚拟 DOM 树中存在，但在旧的虚拟 DOM 树中不存在，则需要进行插入操作。
   • 移动操作：如果某个元素在新旧虚拟 DOM 树中都存在，但不在相同位置上，则需要进行移动操作。
   • 删除操作：如果某个元素在旧的虚拟 DOM 树中存在，但在新的虚拟 DOM 树中不存在，则需要进行删除操作。

通过递归地比较并生成差异树，React diff 算法可以找到最少的变更操作，然后通过更新实际 DOM，从而以最高效的方式更新页面。

值得注意的是，React diff 算法基于两个假设：相同组件产生类似的树结构，不同组件产生不同的树结构。因此，在编写 React 组件时，应尽可能为每个组件定义稳定的 key，避免出现不必要的 DOM 更新。