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

最新推荐文章于 2025-02-11 19:01:02 发布

转载最新推荐文章于 2025-02-11 19:01:02 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zale-blogs/p/8562991.html

文章标签：

#javascript #ViewUI

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

新的旧组件了

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

转载于:https://www.cnblogs.com/zale-blogs/p/8562991.html