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