虚拟DOM and diff 算法

Posted 2020-11-25 padingdun

1. 数据 state

2. JSX模板

3. 数据+模板 结合生成真实的DOM来显示

4. State 变化

5.数据+模板 结合生成真实的DOM， 替换原来的DOM

缺陷：

第一次生成了完整的DOM， 第二次生成了完整的DOM， 第二次替换第一次， 非常消耗性能

1. 数据 state

2. JSX模板

3. 数据+模板 结合生成真实的DOM来显示

4. State 变化

5.数据+模板 结合生成真实的DOM，并不直接 替换原来的DOM

6. 两次DOM 做对比 找出差异

7. 比如某个元素input变化了

8. 只用新的DOM中的input ， 替换掉老的DOM中的Input 元素

缺陷：

性能提升不明显

1. 数据 state

2. JSX模板

3. 数据+模板 结合生成虚拟的DOM(损耗性能小)

<div><span>hello</span></div>

4. 用虚拟DOM生成真实DOM（虚拟DOM是一个JS的对象，用来描述真实的DOM

5. State 发现变化

6. 数据加模板 生成新的虚拟dom（极大的提高了性能）

7. 比较原始虚拟DOM 和新的DOM 区别（极大的提高了性能， 比较JS对象不消耗性能）

8. 直接操作DOM，更新

 

JSX >> React.createElement > 虚拟DOM（JS 对象） >> 真实DOM

优点：

• 性能提升了
• 跨端应用得以实现 ex：react native

setState 是异步的， 是为了提高react 底层的性能

Diff 算法：

同层比对

虚拟DOM的比对会根据Key 进行关联， 极大的提高的性能，所以key最好不变 不要是index