React更新dom的依据：
1、不同类型的elements会产生不同的树
2、通过render方法中包含key属性的子元素，开发者可以示意哪些子元素可能是稳定的。
更新过程：
一、根元素类型不同：旧树被卸载，旧的Dom节点销毁，Component实例将接收componentWillUnmount()方法，
当新建一个树，新节点插入到Dom中，Component实例接收componentWillMount()然后接收componentDidMount()
所有与旧树关联的状态全部销毁。
<div>
<Counter />
</div> <span>
<Counter />
</span>
二、组件类型相同：组件更新时，实例不变，渲染由状态控制，React通过更新底层
的组件实例属性来产生新的元素，并调用底层组件实例的componentWillReceiveProps()和componentWillUpdate()，然后
render（）方法被调用，同时对比算法会递归处理之前的结果和新的结果
三、dom类型一致：只更新改变的属性值，其他的保持不变。
<div style={{color: 'red', fontWeight: 'bold'}} />
<div style={{color: 'green', fontWeight: 'bold'}} />
React是如何迭代子组件的呢？
默认情况下，同一时间遍历新旧两组子代，一旦发现不同便立即变化。这也就导致了下面例子中的差异
//低效
<ul>
<li>Duke</li>
<li>Villanova</li>
</ul> <ul>
<li>Connecticut</li>
<li>Duke</li>
<li>Villanova</li>
</ul> //高效
<ul>
<li>first</li>
<li>second</li>
</ul> <ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
这里呢可以通过给每一个项添加一个key来锁定该项，通知react哪些元素是新的，哪些是已经存在的，就不需要再重新生成
新的旧组件了