底层的理论基础
一. 原始生成步骤
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中的内容