学习React系列，六——更新dom细节于原理
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 red', fontWeight: 'bold'}} /> <div 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哪些元素是新的，哪些是已经存在的，就不需要再重新生成
新的旧组件了
