React-虚拟DOM

什么是虚拟 DOM

本质上是JS和DOM之间的映射缓存，在形态上表现为一个能够描述DOM结构及其属性信息的JS对象。
React虚拟DOM的工作流程，

• 挂载阶段，React 将结合 JSX 的描述，构建出虚拟DOM树，然后通过ReactDOM.render实现虚拟DOM到真实DOM的映射。
• 更新阶段，页面的变化先作用于虚拟DOM，虚拟DOM在JS层借助算法先比较出哪些真实DOM发生改变，再将改变作用于真实DOM。

DOM 操作解决方案

• JS 操作 DOM 时期
• jQuery时期
  将 DOM 操作变得简单、快速、并且始终保证其稳定和可用。
• 模板引擎方案
  将 JS 与 HTML 结合，将数据塞入预置好的 HTML 模板中，然后件模板字符串挂载到 DOM 中

<table>
 {% staff.forEach(function(person){ %}
 <tr>
   <td>{% student.name %}</td>
   <td>{% student.age %}</td>
 </tr>
 {% }); %}
</table>
// 数据和模板融合出 HTML 代码
var targetDOM = template({data: students})
// 添加到页面中去
document.body.appendChild(targetDOM)

模板引擎主要做了下面几件事：

1. 读取 HTML 模板并解析，分离其中的 JS 信息。
2. 将解析出的内容拼接成字符串，生成 JS 代码
3. 运行动态生成的 JS 代码，吐出目标 HTML
4. 将目标 HTMl 赋值给 innerHTML，触发渲染流水线，完成真是 DOM 渲染。

• 虚拟 DOM
  当 DOM 操作（渲染更新）比较频繁时，它会先将前后两次的虚拟 DOM 树进行对比，定位出具体需要更新的部分，生成一个“补丁集”，最后只把“补丁”打在需要更新的那部分真实 DOM 上，实现精准的“差量更新”。这个过程对应的虚拟 DOM 工作流如下图所示：
  

为什么要使用虚拟 DOM

首先使用虚拟 DOM 不一定会提升性能，性能是一个复杂度比较高的问题，当我们量化性能的时候，往往并不能只追求一个单一的数据，而是需要结合具体的参照物、渲染的阶段、数据的吞吐量等各种要素来作分情况的讨论。

虚拟 DOM 解决的关键问题有以下两个

• 提高研发体验/研发效率
• 跨平台的问题
  虚拟 DOM 是对真实渲染内容的一层抽象，如果没有这层抽象，视图层将和渲染平台紧密耦合在一起。有个这层抽象可以实现一次编码，多端运行。