学习React系列（六）——更新dom细节于原理

React更新dom的依据：

一、不一样类型的elements会产生不一样的树

二、经过render方法中包含key属性的子元素，开发者能够示意哪些子元素多是稳定的。

 

更新过程：

1、根元素类型不一样：旧树被卸载，旧的Dom节点销毁，Component实例将接收componentWillUnmount()方法，

当新建一个树，新节点插入到Dom中，Component实例接收componentWillMount()而后接收componentDidMount()

全部与旧树关联的状态所有销毁。

<div>
  <Counter />
</div>

<span>
  <Counter />
</span>

 

2、组件类型相同：组件更新时，实例不变，渲染由状态控制，React经过更新底层

的组件实例属性来产生新的元素，并调用底层组件实例的componentWillReceiveProps()和componentWillUpdate()，而后

render（）方法被调用，同时对比算法会递归处理以前的结果和新的结果

3、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哪些元素是新的，哪些是已经存在的，就不须要再从新生成

新的旧组件了

 

参考：https://reactjs.org/docs/reconciliation.html