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

学习React系列(六)——更新dom细节于原理的更多相关文章

  1. 学习React系列(五)——使性能最优

    提高性能可分为两方面: 一.配置层面 二.代码层面 本文只从代码层面考虑: 一.避免重复渲染 这里要说一句: 当shouldComponentUpdate返回false的时候不触发render函数也就 ...

  2. 五分钟学习React(六):元素(Element)和组件(Component)

    俗话说"万丈高楼平地起",从这一期开始,我们将使用基于Webpack+Babel的React学习React框架中的一些基础概念.在学习React的过程中经常会把Element.Cl ...

  3. 学习React系列(三)——Refs和Dom

    一.适用于以下场景: 1.控制焦点,文本选择,或者媒体控制 2.触发必要的动画 3.整合第三方dom库 二.不要过度使用ref 如果想通过ref来改变state,那么换一种方式-变量提升可能会更好. ...

  4. 学习React系列(一)——React.Component 生命周期

    挂载中(只执行一次) 以下方法在组件实例正被创建和插入到DOM中时调用 constructor()一般用于初始化state和方法的this绑定 componentWillMount() render( ...

  5. 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件

    React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...

  6. 学习React系列(四)——受控组件与非受控组件

    受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...

  7. 学习React系列(十)——Render Props

    解决问题:将行为封装,供多个组件使用(在多个组件之间分享某段代码) 组件中的props属性中包含一个"render"属性(该属性为一个返回值为元素的方法),然后在该组件的rende ...

  8. 学习React系列(九)——高阶函数

    定义:高阶组件就是一个函数,且该函数接收一个组件作为参数,并返回一个新的组件. (上一篇已经说过了高阶组件可以用来解决交叉问题) 一.不要改变原始组件,使用组合 class A extends Rea ...

  9. 学习react系列(八)—— mixins迁移

    先来介绍一下mixins(混入) 先来看一段代码: const mixin = function(obj, mixins) { const newObj = obj; newObj.prototype ...

随机推荐

  1. WPF 16进制byte输入框

    在WPF中,针对byte类型的输入控件可以选用 XCEED 的免费库中的 Xceed.Wpf.Toolkit.ByteUpDown(可从nuget获取). 若要使该控件在界面上以16进制显示byte, ...

  2. 设计模式 --> (5)适配器模式

    适配器模式 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作.比如说我的hp笔记本,美国产品,人家美国的电压是110V的,而我们中国的 ...

  3. 【最全】经典排序算法(C语言)

    算法复杂度比较: 算法分类 一.直接插入排序 一个插入排序是另一种简单排序,它的思路是:每次从未排好的序列中选出第一个元素插入到已排好的序列中. 它的算法步骤可以大致归纳如下: 从未排好的序列中拿出首 ...

  4. SpringMvc环境搭建(配置文件)

    在上面的随笔里已经把搭建springmvc环境的基本需要的包都下下来了,拉下来就是写配置文件了. 下面左图是总的结构,右图是增加包 一.最开始当然是web.xml文件了,这是一个总的宏观配置 < ...

  5. Nginx技巧——Nginx/Apache下禁止指定目录运行PHP脚本(转自运维之美)

    网站程序的上传目录通常是不需要PHP执行解释权限,通过限制目录的PHP执行权限可以提网站的安全性,减少被攻击的机率. 下面和大家一起分享下如何在Apache和Nginx禁止上传目录里PHP的执行权限. ...

  6. 解决C盘中的文件不能修改问题

    在不能修改的文件右击属性>点击安全>编辑>点击用户>完全控制. 步骤如图: 最后点击确定.

  7. Linux学习--线程概念

    线程 我们知道 ,进程在各自独立的地址空间中运行,进程之间共享数据需要用mmap或者进程间通信机制,本节我们学习如何在一个进程的地址空间中执行多个线程.有些情况需要在一个进程中同时执行多个控制流程,这 ...

  8. Flask 学习 十 博客文章

    提交和显示博客文章 app/models.py 文章模型 class Post(db.Model): __tablename__ = 'posts' id = db.Column(db.Integer ...

  9. Java ftp 上传文件和下载文件

    今天同事问我一个ftp 上传文件和下载文件功能应该怎么做,当时有点懵逼,毕竟我也是第一次,然后装了个逼,在网上找了一段代码发给同事,叫他调试一下.结果悲剧了,运行不通过.(装逼失败) 我找的文章链接: ...

  10. 根据HTML5的新方法 drag & drop 方法实现表格拖拽实例

    上一次学习了html5的drag和drop方法,传送门  就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详 ...