React Diff算法

Diff 算法背景

在某一时间节点调用 React 的 render() 方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render() 方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI 以保证当前 UI 与最新的树保持同步。

这个算法问题有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作数。 然而，即使在最前沿的算法中，该算法的复杂程度为 O(n³)，其中 n 是树中元素的数量。

如果在 React 中使用了该算法，那么展示 1000 个元素所需要执行的计算量将在十亿的量级范围。这个开销实在是太过高昂。于是 React 在以下两个假设的基础之上提出了一套 O(n) 的启发式算法：

• 两个不同类型的元素会产生出不同的树；
• 开发者可以通过 key prop 来暗示哪些子元素在不同的渲染下能保持稳定；

在实践中，我们发现以上假设在几乎所有实用的场景下都成立。

Diffing 算法

当对比两颗树时，React 首先比较两棵树的根节点。

根结点元素类型不同

销毁原有节点及其子节点，创建新节点
原组件先执行componentWillUnmount()，然后新组件执行componentWillMount()和 componentDidMount()
就算新旧树的子节点相同，也会先销毁后重新加载

根结点元素类型相同

当对比两个相同类型的 React 元素时，