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节点进行不必要的重建，使得性能下降并丢失子组件的状态。