虚拟DOM实现流程

 

尚未使用虚拟DOM

方案一：

1． state数据

2．JSX模版

3，数据＋模版结合，生成真实的DOM，来显示

4． state发生改变

5.   数据＋模版结合，生成真实的DOM，替換原始的DOM

 

缺陷：

第一次生成了ー个完整的DOM片段

第二次生成了一个完整的DOM片段

第二次的D0M替换第一次的DOM，非常耗性能

方案二：

1． state数据

2．JSX模版

3．数据＋模版结合，生成真实的DOM，来显示

4． state发生改变

5。数据＋模版结合，生成真实的DOM，并不直接替换原始的DOM

6。新的DOM（ Doucumentfragment）和原始的DOM做比对，找差异

7．找出 input框发生了变化

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

 

缺陷

性能的提升井不明显

 

使用虚拟DOM：

1. state歜据

2.JSX模版

3.数据＋模版生成虚拟DOM(虚拟DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能）

［＇div＂，{id：‘abc’,[＂span＇，{}，＇ hello world]]

4.用虚拟DOM的结构生成真实的D0M，来显示

<div id="abc"><span>heillo world</span></div>

5. state发生变化

6.数据＋模版 生成新的应拟DOM（极大的提升了性能)

[＂div，tid：＇abc'｝。［＇span'，{}，＂ bye bye＂]]

7.比较原始虚拟DOM和所的虚拟DOM的区别，找到区别是span中内容（极大的提升性能）

8.直接操作DOM，改变span中的内容。

 

优点

1.性能提升了

2.它使得跨端应用得以实现。react  native