【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值。
最新文章
- 深入分析ClassLoader
- mysql 安装和卸载
- N皇后问题(位运算实现)
- python-set集合类方法
- 每日Scrum--No.9
- HybridApp iOS ATS解决方案
- C++将string转化成字符串数组
- ASP.NET导出Excel(利用NPOI和EPPlus库,无需安装Office)
- 【JavaScript】关于JavaScript
- Altera FPGA中的pin简介
- tamper-proof 对象 nonextensible对象 sealed对象 frozen对象
- LightOJ1336 Sigma Function
- symfony generate bundle autoload failed的解决办法
- mybatis插入数据并返回主键(oracle)
- Python+Selenium学习--自动生成HTML测试报告
- python 随机模块常用命令
- linux系统管理 系统进程
- 查看linux的IO占用
- 【LeetCode21】Merge Two Sorted Lists★
- Linux命令(十二) 分割文件 split 合并文件 join