ref: https://react.docschina.org/docs/reconciliation.html
前提
- 两个不同类型的元素将产生不同的树。
- 通过渲染器附带key属性，开发者可以示意哪些子元素可能是稳定的。
算法复杂度
- 广度优先的算法比较 ， O（n）
协调（Reconciliation）算法
- 不同类型的元素
- 每当根元素有不同类型，React将卸载旧树并重新构建新树。从<a>到<img>或从<Article>到<Comment>，或从<Button> 到 <div>，任何的调整都会导致全部重建
- 相同类型的DOM元素
- 当比较两个相同类型的React DOM元素时，React则会观察二者的属性，保持相同的底层DOM节点，并仅更新变化的属性
- 相同类型的组件元素
- 当组件更新时，实例仍保持一致，以让状态能够在渲染之间保留。React通过更新底层组件实例的props来产生新元素，并在底层实例上依次调用componentWillReceiveProps() 和 componentWillUpdate() 方法.
- 递归子节点存在的问题
- 默认时。当递归DOM节点的子节点，React仅在同一时间点递归两个子节点列表，并在有不同时产生一个变更。 这就导致当在最后插入一个新的节点时，转换效果非常好，因为前面的节点都没有变化，故不需要重新渲染，如：
<ul> <li>first</li> <li>second</li> </ul> <ul> <li>first</li> <li>second</li> <li>third</li> </ul>- 当在最开始的位置插入新的元素时，React会调整每个节点，因为对比的结果是每个节点都变化了。如：
<ul> <li>Duke</li> <li>Villanova</li> </ul> <ul> <li>Connecticut</li> <li>Duke</li> <li>Villanova</li> </ul> - Keys 属性解决递归子节点出现的问题
- 当子节点有key时，React使用key来匹配原本树的子节点和新树的子节点. 如：
<ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul>- 现在React知道带有'2014'的key的元素是新的，并仅移动带有'2015'和'2016'的key的元素。
- Note:
- Key 属性在通常使用是一般选择ID属性。
- key必须在其兄弟节点中是唯一的，而非全局唯一。
- 尽量不要使用数组的index作为key值，因为当元素重新排序时会引发不确定的问题，且性能下降。
- Keys应该是稳定的，可预测的，且唯一的。不稳定的key（类似由Math.random()生成的）将使得大量组件实例和DOM节点进行不必要的重建，使得性能下降并丢失子组件的状态。
