本文介绍react的调和过程和diff算法

所谓的调和，本质是将虚拟节点转换为真是dom的过程

React15栈调和机制下diff的核心逻辑

先看下图的两个节点：

  1. 先对比连个根节点，是否为同一个元素，判断依据标签名和key。若是同一节点，更新各个属性，进入子节点的diff，若不是，简单粗暴，删除旧节点，根据新结点的虚拟dom挨个创建。
  2. 进入子节点的对比后，从头至尾依次对比。旧节点所有子节点从左到右一次同新虚拟dom的子节点对比。判断是否为同一节点，是则更新相关属性下一个。不是，删除旧节点。图中依次是B、D、E，到D时，发现不同，删除D创建C。到E时发现不同删除E创建D。
  3. 最后因为新节点还有一个E剩余，创建之。完毕。
    注意：react15的栈调和是深度优先遍历的。倘若D有子组件，那么会继续往下走，最后再往回冒。

上述过程存在的一个问题，新节点中明明也有D、E，但是我们还是经过了删除、创建，明显浪费。此时，就祭出了我们的key.

key属性帮助react记住节点。D、E只需要执行插入即可