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

假想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中内容