此文档通过慕课网学习视频做的笔记
看官莫急,急的话,直接看最后 改进方法二 React
原始方法
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和原始的DOM做对比,找差异
7、找出发生变化的是标签
8、只用新dom的变化标签替换老DOM的标签
缺陷:性能的提升并不明显
改进方法二 React
1、state数据
2、JSX 模版
jsx->creatElement->js对象虚拟dom->真实的dom结点
3、生成虚拟dom(实际上就是一个js对象,用它来描述真实DOM)(消耗性能极低)
虚拟dom表示上面的标签[‘div’,{id:‘abc’},[‘span’,{},‘hello’]]
4、用虚拟dom的结构,生成真实的DOM,来显示
真实DOM:<div id="abc"><span>hello</span></div>
5、state发生改变
5、生成新的虚拟dom
[‘div’,{id:‘abc’},[‘span’,{},‘bye bye’]]
6、新的虚拟DOM和原始虚拟DOM做对比,找差异,找出 span内容发生变化(两个js的比对耗能极低)
7、直接操作DOM,改变span中的内容
优点:性能大大提升