react简书项目学习笔记9虚拟dom

react

假想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.找出Input框发生了改变

8.只用新的dom中的Input元素替换掉老dom中的Input元素

缺陷:性能的提升不明显

第三种方案

1.state数据

2.jsx模板

3.数据+模板结合,生成真实的dom,来显示

<div id = "abc"><span>helloword><span></div>

4.生成虚拟dom(js对象)(虚拟dom就是一个Js对象,用它来描述真实dom) (损耗了性能)

['div',{id:'abc'},['span'{},'helloword']]

5.state发生变化

6.生成新的虚拟dom(极大的提升性能)

提高性能:因为减少了对真实dom的创建
生成dom非常损坏性能,生成Js对象容易很多

['div',{id:'abc'},['span'{},'byebye']]

7.比较原始虚拟dom和现在虚拟dom的区别,找到区别是span中内容

找区别用的是diff算法即difference算法。

引入key值可以提升虚拟dom比对的性能,因为虚拟dom的比值会根据Key值做关联,如果提供了key值,可以提高虚拟dom的比对效率,另外key值最好不要是Index,因为Key值要保持不对才有助于提高效率,如果Key值发生变化,key值的设立就失去了意义。比如数组删除前面的元素时,后面的值的Key就都变了。

使用稳定的值作为Key值

react的虚拟dom其实是同层比对的

8.直接操作dom,改变span中内容

以上是 react简书项目学习笔记9虚拟dom 的全部内容, 来源链接: www.h5w3.com/js/381163.html

回到顶部