【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一、React如何更新DOM内容:
1. 获取state 数据
2. 获取JSX模版
3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1)
<div id=' abc '><span>hello world</ span></div>
4.生成代码1对应的虚拟DOM (简称代码2):(解释:虚拟DOM就是一个JS对象,用它来描述真实DOM)
['div', {id: 'abc'}, ['span', {}, 'hello world' ] ]
5. 当state 发生变化
6.生成新的虚拟DOM(简称代码3)
['div', {id: ' abc' }, ['span', {}, 'bye bye']]
7.比较原始虚拟DOM和新的虚拟DOM的区别(即比较代码2和代码3),找到两者区别是Span中内容. 直接操作DOM,改变span中的内容
二、React如何提高性能
而传统处理方式是:先改变数据后生成DOM对象,然后让两个DOM对象做对比。
都知道,只要是对DOM直接操作,不管是生成DOM还是对比DOM都是非常耗性能的。
而React的底层上述已经介绍了,生成的是虚拟DOM,本质就是生成JS对象,这个耗能是非常低的。
所以,React能极大的提升性能
三、Diff算法核心(Diff算法即新旧虚拟DOM比较算法)
1.在哪用到了Diff算法
首先Diff算法在React的虚拟DOM中的第7步涉及:
即比较原始虚拟DOM和新的虚拟DOM的区别(即比较代码1和代码3)
2.Diff算法核心之合并setState
如图:当在很短的时间内有多个setState发生时,则Diff算法会自动将其合并为一个时间,从而只比对一次,提高性能
3.Diff算法核心之同层比较
数据改变重新比对虚拟DOM时,新虚拟DOM与旧虚拟DOM进行同层比较,从根节点开始比较,当节点数据发生改变时,该节点和从该节点延展出的所有子节点都将被替换。
可能有人认为这样比较的话,如果新旧虚拟DOM子节点中有相同的但还是全部被替换,那岂不是造成资源浪费了?确实造成资源浪费啦,但是因为这个算法非常简洁所以执行速度很快,因而算法的综合效率更高。
4.Diff算法核心之Key值
Diff算法当遇到循环的数组时,比对是根据每一项数据的key值来进行比较的,这样有助于提升效率。
但是建议不要将index值作为key值。因为每项的index值并不是定值。
比如数组[a,b,c],其中a、b、c对于下标0、1、2,当删去a时,数组为[b,c],对于下标为0、1。
显然b和c的前后index值改变啦,这样会让React重新渲染该数组每一项。导致性能损耗。
建议:最简单的方法是使用item做key值。
【React自制全家桶】二、分析React的虚拟DOM和Diff算法的更多相关文章
- 【React自制全家桶】六、React性能优化(持续更新总结)
一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法 二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...
- 【React 7/100 】 虚拟DOM和Diff算法
虚拟DOM和Diff算法 React更新视图的思想是:只要state变化就重新渲染视图 特点:思路非常清晰 问题:组件中只有一个DOM元素需要更新时,也得把整个组件的内容重新渲染吗? 不是这样的 理想 ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- 【React自制全家桶】五、React组件的生命周期函数详解
一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...
- react中虚拟dom的diff算法
.state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...
- 虚拟dom与diff算法 分析
好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM
- 【React自制全家桶】四、React中state与props的分析与比较
一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
随机推荐
- C++堆排序算法的实现
堆排序(Heap sort)是指利用堆这种数据结构所设计的一种排序算法.堆积是一个近似完全二叉树的结构,并同时满足堆积的性质:即子结点的键值或索引总是小于(或者大于)它的父节点.堆排序可以用到上一次的 ...
- maven报错 java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, see the following errors
2 errors java.lang.RuntimeException: com.google.inject.CreationException: Unable to create injector, ...
- Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...
- Type反射遍历类的属性
<?xml version="1.0" encoding="utf-8" ?> <configuration> <startup& ...
- Excel种的数据类型研究【原创】【精】
因为要做一个项目,开始研究Excel种的数据类型.发现偌大的一个cnblogs竟然没人写这个,自己研究以后记录下来. 在我们通常的认识中,Excel中的数据类型有这么几种 1.常规:2.数值:3.货币 ...
- BZOJ 1015 并查集&连通块
很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过特殊的以太隧道互相直接或 ...
- 获取header信息
获取header信息 function _get_all_header() { // 忽略获取的header数据.这个函数后面会用到.主要是起过滤作用 $ignore = array('host',' ...
- LOAD DATA INFILE & mysqlimport
+++++++++++++++++++++++++++++++++++++++++++++mysqlimport++++++++++++++++++++++++++++++++++++++++++++ ...
- Mac终端神器zsh
Mac终端神器zsh 先上一张图 1.背景介绍 在unix 内核的操作系统中,当然现在衍生出好多分支,linux ,OS X 都算. shell 就算和上面这些系统内核指令打交道的一座桥梁,我们通过键 ...
- JS单线程和异步
线程和单线程的概念: 线程:是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同 ...