React入门系列（三）

当我们把虚拟Dom构建成功之后，我们就需要对新旧Dom进行对比，找出其中真正发生变化的部分
在某一时间节点调用 React 的 render()方法，会创建一棵由 React 元素组成的树。在下一次 state 或 props 更新时，相同的 render()方法会返回一棵不同的树。React 需要基于这两棵树之间的差别来判断如何有效率的更新 UI
以保证当前 UI 与最新的树保持同步

Diff算法
当对比两颗树的时候，React会首先比较两颗树的根节点，不同类型的根节点元素会有不同的形态
1. 当根节点为不同类型的元素时:
如果树的根节点为不同类型的元素时，React会拆掉整个旧的树，并且重新构造一个新的树，在旧的Dom树被销毁的时候， 组件实例调用componentWillMount钩子和componentDidMount钩子， 如从<a>到<img>,从<div>到<from>,<Article>到<Commit>都会导致重新创建。并且state会被销毁
2.当根节点为相同类型的元素时:
当比较两个相同类型的Dom元素，React会查看它们两个的属性，React仅仅更新被改变的属性。当处理完根DOM节点之后，React又会递归的比较它们的子元素
3.如果是相同类型的组件元素时:
当组件发生改变的时候，其组件实例并不会随之改变，组件的state还是存在的，state在跨越不同的渲染时保持一致，
React更新下面组件实例的props，下面的组件实例调用componentWillReceiveProps钩子和componentWillUpdate钩子。接下来调用render方法并且diff算法在之前的结果和新的结果上递归
对子节点进行递归
在默认条件下，当递归 DOM 节点的子元素时，React 会同时遍历两个子元素的列表；当产生差异时，生成一个 mutation

<ul>
 <li>first</li>
 <li>second</li>
</ul>

<ul>
 <li>first</li>
 <li>second</li>
 <li>third</li>
</ul>

React会捕获到两个<li>first</li>，两个<li>second</li>，然后将<li>third</li>插入。如果在列表中最开始插入了一个元素，那么对性能影响非常大，

<ul>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

<ul>
  <li>Connecticut</li>
  <li>Duke</li>
  <li>Villanova</li>
</ul>

这种情况React会改变每一个子元素。可以通过给元素设置key来解决这个问题，当子元素拥有 key 时，React 使用 key 来匹配原有树上的子元素以及最新树上的子元素

<ul>
  <li key='1'>Duke</li>
  <li key='2'>Villanova</li>
</ul>

<ul>
  <li key='3'>Connecticut</li>
  <li key='1'>Duke</li>
  <li key='2'>Villanova</li>
</ul>

现在 React 知道只有带着 ‘3’key 的元素是新元素，带着 ‘1’ 以及 ‘2’ key 的元素仅仅移动了，你可以新增一个 ID 字段到你的模型中，或者利用一部分内容作为哈希值来生成一个 key。这个 key 不需要全局唯一，但在列表中需要保持唯一