react 什么是虚拟DOM？深入了解虚拟DOM

底层的理论基础

一. 原始生成步骤

1.state 数据

2.jsx 模版

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

4.state 发生改变了

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

缺陷：

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

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

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

二. 逐步改进

1.state 数据

2.jsx 模版

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

4.state 发生改变了

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

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

7.找出input框发生了变化

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

缺陷：

性能的提升不明显

三. react 虚拟DOM

1.state 数据

2.jsx 模版

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

<div id="abc"><span>hello world !</span></div>

4.生成虚拟DOM（虚拟DOM就是一个js 对象，用它来描述真实DOM）（损耗性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

5.state 发生变化

6..数据 + 模板生成新的虚拟DOM（极大的提升了性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span的内容 (极大的提升了性能)

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

React中虚拟DOM的概念：

虚拟DOM本质上就是一个JS对象，之所以能够提高性能，本质上是因为js去比较js对象不太消耗性能，而去比较真实的DOM会很消耗性能。

四. 深入了解虚拟DOM

实际实现：

1.state 数据

2.JSX 模版 JSX->creatElement ->虚拟DOM（JS对象）->真实DOM

3. 数据 + 模板生成虚拟DOM（虚拟DOM就是一个js 对象，用它来描述真实DOM）（损耗性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

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

<div id="abc"><span>hello world !</span></div>

5. state 发生变化

6. 数据 + 模板生成新的虚拟DOM（极大的提升了性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span的内容 (极大的提升了性能)

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

优点：

1.性能提升了

2.它使得跨端应用得以实现。React Native

渲染DOM在浏览器上是没有什么问题的，可是在移动端的原生应用里面，我们开发的安卓，iOS机器代码当中里面是不存在DOM的概念的，所以在原生的应用里没有办法生成DOM，也无法被使用，但是有了虚拟DOM就不一样了，我们的代码首先会被转化成一个虚拟DOM，然后它是个js对象，它放在浏览器里可以被识别，同时，它在原生的应用里面也可以被识别，所以这个虚拟DOM不管是在原生应用里面还是在网页应用里面都可以被正确的识别。

五. 虚拟DOM中的Diff算法

1.state 数据

2.JSX 模版

3. 数据 + 模板生成虚拟DOM（虚拟DOM就是一个js 对象，用它来描述真实DOM）（损耗性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

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

<div id="abc"><span>hello world !</span></div>

5. state 发生变化

6. 数据 + 模板生成新的虚拟DOM（极大的提升了性能）

['DIV',{ id : 'abc'},['span',{},'bye bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span的内容 (极大的提升了性能)

diff算法（diffrence）

同层比对，

能不用index做key值就不用index做key值。

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

巴特西

react 什么是虚拟DOM？深入了解虚拟DOM

最新文章

热门文章