react中的虚拟DOM

矫情吗；* 2023-02-17 05:24 5阅读 0赞

数据驱动原理

假如让我们自己实现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（实际上就是DocumentFragment），和原始的DOM做比对，找差异
    7.  找出input框发生了变化
    8.  只用新的DOM中的input元素，替换掉老的DOM中的input元素

缺陷：  
性能的提升并不明显

*  用虚拟DOM：  
    ·1. state数据  
    ·2. JSX模板  
    ·3. 数据 + 模板相结合，生成虚拟DOM（虚拟DOM就是一个js对象，用它来描述真实的DOM），比如  
    `['div', {id: 'abc'}, ['span', {}, 'hello']]`（损耗了极小的性能）  
    ·4.用虚拟DOM的结构生成真实的DOM  
    `<div id = 'abc'><span>hello</span></div>`  
    ·5. state 发生变化  
    ·6. 数据 + 模板 生成新的虚拟DOM （极大地提升了性能）  
    `['div', {id: 'abc'}, ['span', {}, 'bye']]`  
    ·7. 比较原始虚拟DOM新的虚拟DOM的区别，找到区别是span中的内容（极大地提升了性能）  
    ·8. 直接操作DOM，改变span中得内容

优点：

1.  性能提升了
2.  它使得跨端应用得以实现，由此产生React Native。因为原生应用中是没有DOM这个概念的，不过虚拟DOM的js对象可以被正常识别，因此只要加一层判断辨别是浏览器还是原生app即可将虚拟DOM的思想引入从而使react可以开发原生app

那么，react是在哪里创建虚拟dom的呢？  
每次react中的state或者props改变时会触发组件中的render函数，父组件触发render函数时子组件也会跟着触发render函数，而虚拟DOM 即是在render函数中被创建。比如:

render() {
      return <div id='abc'><span>hello</span></div>
    }

上图中return的内容是JSX模版，实际上底层实现是用 React.createElement 创建,其接收三个参数，第一个是创建的标签，第二个是它的属性，第三个是它的内容

render() {
      return React.createElement('div', {id: 'abc'}, React.createElement('span', {}, 'hello'))
    }

上面两段代码是等价的，JSX模版其实只是react为了让我们开发更简单便捷，其底层还是用 React.creatElement 这个api构建的，即  
JSX -> createElement -> 虚拟DOM(js对象) -> 真实DOM

虚拟DOM中的diff算法

用虚拟DOM完成数据驱动涉及到关键的一点就是我们如何比较两个虚拟DOM的差异。  
首先我们得确定发生差异的来由，归根结底是组件的state发生了变化，调用了setState方法，之后我们就会生成新的虚拟DOM与旧的进行比对

![format_png][]

引发渲染的原因

可以试想，若调用了三个setState方法，那么我们就得生成三次、比对三次，而且如果调用的时间过短的话，无疑会给比对增加许多压力，消耗性能。react旧的setState方法接收的是一个对象，难免就会遇到上述问题，react16中则建议将setState方法的参数改成一个函数，其变成了一个异步方法，即三个setState会自动合成一个setState，生成一次虚拟DOM比对一次差异，这是新的api带来的性能优化

1.  同级比较
    
     
    
    ![format_png 1][]
    
    同级比较
    
     
    
    diff算法中只会比较同层级的元素，一旦发现某一级之间有所不同，则会弃置其子级，直接用从新的差异的一级以及其下的所有子级替换老的。我们会有个疑问，这样做那子级中相同的元素不是无法复用了吗，那怎么还能提高比对性能？这无疑是一种缺陷，但也带来了好处就是算法实现简单，也就提高了比对速度，因此最后也是提升了性能的
2.  引用key值

for循环中如果没有给每个item所在标签增加一个key值，vue和react中都会发出警告，建议我们加上，这是因为当进行虚拟DOM比对时，我们需要比较出相同的元素和不同的，没有key我们就很难一一对应，需要做两层循环比较，用上了key值则我们可以清楚比较出哪一个新增或删除了什么，就像下图

![format_png 2][]

有无key的差别

有了key值我们就可以轻易判别z是新加的元素从而找出了差异。有一个注意点就是开发中有些小白喜欢用index做key值，这是不建议的。就像下图

![format_png 3][]

key值问题

如果我们创建了a、b、c三个item，key值分别定义为其index：0、1、2  
当我们删除了a，则b、ckey值变为了0、1，则每一项之间无法根据key值一一对应起来了，失去了key值存在的意义。因此建议是用稳定的值作为key值，比如特有的id

虚拟dom以及其diff算法是react框架中的底层原理，腾讯面试官面试前端时也曾问过，无非就是告诉我们不能只会用，还要往深处去钻，了解原理开发遇到bug才不会手足无措，才有可能快速调试处bug的原因。比如不懂引用类型的深拷贝浅拷贝原理，当我们发现复制过来的值改变了，原来的值也发生了变化就会匪夷所思。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80NTczNzQyLTE5ZGM2ODI4NTA0ODZiN2IucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTE5OS9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80NTczNzQyLTAxMTZhYzY5YmQwMmNkYjgucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMTA2Ni9mb3JtYXQvd2VicA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80NTczNzQyLWE1Y2RiNzQ3ZWZlZjE2MDMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvOTY1L2Zvcm1hdC93ZWJw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy80NTczNzQyLTUxNWI1Njc5MTJkOGEyYjMucG5nP2ltYWdlTW9ncjIvYXV0by1vcmllbnQvc3RyaXB8aW1hZ2VWaWV3Mi8yL3cvMjYyL2Zvcm1hdC93ZWJw?x-oss-process=image/format,png