2rever的前端小站

react 虚拟DOM和diff算法的笔记

Word count: 630 / Reading time: 2 min
2018/10/11 Share

几种更改数据算法的区别

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
1. state 数据
2. JSX 模板
3. 数据 + 模板 结合,生成真实DOM,来显示
4. state发生改变
5. 数据 + 模板 结合,生成真实的DOM,替换原始DOM

* 缺陷:
第一次生成了一个完整的DOM片段
第二次生成了一个完整的DOM片段
第二次的DOM替换第一次的DOM
直接操作DOM元素,消耗大量的性能

============================

1.state 数据
2. JSX 模板
3. 数据 + 模板 结合,生成真实DOM,并不直接替换原始的DOM
4. state 发生改变
5. 数据 + 模板 结合,生成真实的DOM,并不直接替换原始DOM
6. 新的DOM(DocumentFragment) 和原始的DOM 作比对,找差异
7. 找出input 框发生了变化
8. 只用新的DOM中的input 元素,替换掉老的DOM的input元素

* 缺陷:
性能的提升并不明显,虽然替换input元素节约了一部分性能,但是直接在新旧DOM
做对比,还是有一些性能上的损耗。

============================

1.state 数据
2. JSX 模板
3.生成虚拟DOM(虚拟DOM就是一个JS对象,用来描述真实DOM)(损耗性能)
4. 用虚拟DOM的结构,生成真实的DOM,来显示
5. state 发生变化
6. 数据 + 模板 生成新的虚拟DOM
7.比较原始虚拟DOM 和新的虚拟DOM区别,找到两者的区别(极大提升了性能)
8.直接操作DOM,改变变化的内容

* 优点:
1.性能提升了。
2.它使得跨端应用得以实现 React Native

============================

setState优化

  • setState是异步的,如果连续调用多次setState,react会合并成一次,来节约调用多次setState做的性能消耗。

diff 算法的同层比对

  • diff算法只比对一层DOM元素,只要一层不一样,则重新生成一次真实DOM,不会继续向下做对比,并替换原来的真实DOM元素,可能会造成DOM重新渲染的浪费,但是因为是同层比对,速度会比较快。而且在虚拟DOM当中设置key值,会对比前后两个虚拟DOM的key值会很快对比出来,当用index来作为key的时候,index是不稳定的,所以尽量不要用index来作为key值,来提升虚拟DOM对比的性能。
CATALOG
  1. 1. 几种更改数据算法的区别
  2. 2. setState优化
  3. 3. diff 算法的同层比对