（八）React 的虚拟DOM

一代

1. state数据
2. JSX模版
   3.数据+模版结合，生成真实的DOM，来显示
3. state发生改变
   5.数据+模版结合，生成真实的DOM,替换原始的DOM
   缺陷:
   第一次生成了一个完整的DOM片段
   第二次生成了一个完整的DOM片段
   第二次的DOM替换第-次的DOM， 非常耗性能

二代

1. state 数据
2. JSX模版
   3.数据+模版结合，生成真实的DOM，来显示
3. state 发生改变
   5.数据+模版结合，生成真实的DOM，并不直接替换原始的DOM
   6.新的DOM (DoucumentF ragment)和原始的DOM 做比对，找差异
   7.找出input框发生了变化
   8.只用新的DOM中的input元素， 替换掉老的DOM中的input元素
   缺陷:
   性能的提升并不明显

三代、React 虚拟DOM

1. state数据
2. JSX模版
   3.数据 + 模版 生成虚拟DOM (虚拟DOM就是一个JS对象，用它来描述真实DOM) （损耗了极小的性能）
   用js生成一个js对象，代价非常小；但是用js生成一个DOM元素，代价极高，因为要调用webapplication级别的API。
   ['div', {id: 'abc'}, ['span', {}, 'hello world']]
   4.用虚拟DOM的结构生成真实的DOM，来显示
   <div id=' abc ' ><5 pan>hello world</ span></div>
3. state 发生变化
   6.数据 + 模板 生成新的虚拟DOM （极大的提高了性能）
   ['div', {id: 'abc'}, ['span', {}, 'bye bye' ] ]
   7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升了性能）
   8.直接操作DOM,改变span中的内容

JSX ->createElement()方法 -> 变成虚拟DOM（ JS对象） -> 真实的DOM)

//JSX 只是为了方便编码
 return <div>item</div>
//等价于
 return React.createElement('div',{},'item')
//React.createElement() 更偏向于底层的React接口

虚拟dom 的好处

1.性能提升了，DOM的比对变成了JS对象的比对。
2.使得跨端应用得以实现，React Native-可以用React 的语法去写原生应用，得益于虚拟DOM的存在，虚拟DOM不管是在 网页应用 里面还是在 原生应用 里都可以被识别。