React diff算法

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

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

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

1. 两个不同类型的元素会产生出不同的树;
2. 开发者可以通过keyprop来暗示哪些⼦元素在不同的渲 染下能保持稳定

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

diff策略

1. 同级比较，WebUI中DOM节点跨层级的移动操作特别 少，可以忽略不计。
2. 拥有不同类的两个组件将会⽣成不同的树形结构。 例如:div->p, CompA->CompB
3. 开发者可以通过keyprop来暗示哪些⼦元素在不同的渲染下能保持稳定;