React 协调（Reconciliation）

[bigggge]

React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分。

传统的 diff 需要出了上面的比较之外，还需要跨级比较。 他会将两个数的节点，两两比较，这就有 n^2 的复杂度了。 然后还需要编辑树，编辑的树可能发生在任何节点，需要对树进行再一次遍历操作，因此复杂度为 n。加起来就是 n^3 了。

对比算法

不同类型的元素

每当根元素有不同类型，React将卸载旧树并重新构建新树。

相同类型的DOM元素

保持相同的DOM节点，仅更新变化的属性

相同类型的组件元素

React通过更新底层组件实例的props来产生新元素

Key

Keys 应该是稳定的，可预测的，且唯一的。不稳定的 key（如Math.random()）将使得大量组件实例和 DOM 节点进行不必要的重建，使得性能下降并丢失子组件的状态。

组件实例基于 key 进行更新和重用。如果 key 是索引，则 item 的顺序变化会改变 key 值。这将导致非受控组件的状态更新错误。

index 作为 key 的例子