尚未使用虚拟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