React学习-Virtual DOM

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

什么是 Virtual DOM？

在 React 官网上是这么介绍 Virtual DOM 的。

Virtual DOM 是一种编程概念，在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。

这种方式赋予了 React 声明式的 API：您告诉 React 希望让 UI 是什么状态，React 就确保 DOM 匹配该状态。这使您可以从属性操作、事件处理和手动 DOM 更新这些在构建应用程序时必要的操作中解放出来。

上面的一段话是 React 官网上描述的。下面具体解释一下 Virtual DOM

Virtual DOM 是一种编程概念。
这是 React 官方给出的定义。

UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中

UI 是如何以【虚拟的】表现形式保存到内存中的？

请将下面的代码放入谷歌浏览器控制台，valueCount会输出298；

    var oDiv = document.createElement('div')
    var value = '';
    var valueCount = 0
    for (key in oDiv) {
        value += `${key},`
        valueCount++
    }
    console.log('value', value)
    console.log('valueCount', valueCount)// 2022年1月24，valueCount返回298

上面的代码可以帮助理解 document.createElement 创建了一个div对象，并且对象上有298个属性 。既然 document.createElement 创建的是对象，那可不可以这样，我保存一个名为 div 的JavaScript对象，对象中的数据通过如 ReactDOM 等类库使之与“真实的” DOM 同步；这样在操作 DOM 属性的时候，直接操作JavaScript对象，然后再通过协调，将JavaScript对象修改后的数据与与“真实的” DOM 同步；这个JavaScript对象就被称为Virtual DOM

总结

用JavaScript对象表示DOM结构的信息，当需要操作DOM的时候，只需要修改JavaScript对象数据，重新将JavaScript数据“同步”到真实DOM，这个JavaScript对象被称为 Virtual DOM

为什么会用到 Virtual DOM ？

直接操组DOM，不能做到批量统一；比如一个操作影响了布局整个页面要重排重绘，然后另一个操作又要再将页面改变回来。两次操作，页面要重排重绘两次；如果页面需要大量的重排重绘，比较消耗浏览器性能。如果使用 Virtual DOM ，两次操作只是在 JavaScript 对象上处理数据的变化，通过 Diff 算法对比新旧JavaScript对象差异。将变更差异最小化执行，可以大大较少性能消耗，提升用户体验。

结语

以上仅限个人学习理解，如有不足敬请谅解。如能指出不足，不胜感激。