解析 React 虚拟 DOM 原理 + DOM Diff 算法

导读：

• 当用原生 JS / jQuery 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾渲染一遍 DOM 节点，而大量的 DOM 操作会频繁的更新 DOM（ 即再次从头到尾渲染 ），这无疑是非常消耗浏览器性能的，因此由 FaceBook 团队提出的虚拟 DOM 横空出世，并运用在了 React 之上（ 目前 Vue 2.x 也引入了这个概念 ），接下来我们就分析一下虚拟 DOM 的原理。

虚拟 DOM 原理：

• 无虚拟 DOM 时，React 中 DOM 的渲染流程：
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板 结合，生成真实的 DOM，来显示
  4. state 发生改变
  5. 数据 + 模板 结合，生成真实的 DOM，替换原始的 DOM

缺陷：
第一次生成了一个完整的 DOM 片段
第二次生成了一个完整的 DOM 片段
第二次的 DOM 替换了第一次的 DOM，非常耗性能

• React 优化后，React 中 DOM 的渲染流程：
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板 结合，生成真实的 DOM，来显示
  4. state 发生改变
  5. 数据 + 模板 结合，生成真实的 DOM，并不直接替换原始的 DOM
  6. 新的 DOM（ DocumentFragment ）和原来的 DOM 树做对比，找差异（ 耗性能 ）
  7. 找出发生变化的节点
  8. 只能新的 DOM 中发生变化的节点替换掉老的 DOM 中的相应节点

缺陷：
性能提升并不明显

• 引入虚拟 DOM 后，React 中 DOM 的渲染流程：
  1. state 数据
  2. JSX 模板
  3. 数据 + 模板，生成虚拟 DOM （ 虚拟 DOM 就是一个 JS 对象，用它来描述真实的 DOM ）（ 损耗了性能 ）
     [ 'div', { id: "root" }, [ 'span', { }, 'hello world' ] ]
  4. 用虚拟 DOM 的结构生成真实的 DOM，来显示
     <div id="root"><span>hello world</span></div>
  5. state 发生变化
  6. 数据 + 模板 结合，生成新的虚拟 DOM（ 极大提升了性能 ）
     [ 'div', { id: "root" }, [ 'span', { }, 'bye bye' ] ]
  7. 比较新的虚拟 DOM 和原始虚拟 DOM 的区别，找到区别是 span 中的内容（ 极大提升了性能 ）
  8. 直接操作 DOM，改变 span 中的内容
     总结：JSX -> React.createElement -> 虚拟 DOM （JS对象）-> 真实的DOM

优点：
性能提升
它使得跨端应用得以实现。React Native

DOM Diff 算法：

• 首先当改变 state 数据时，由于 setState 是一个异步函数（ 官方文档原话：不保证它是同步的 ），这里关于异步的问题我们暂时这么理解，如果深究可以自行去其他博客学习，当你一次调用三次 setState 时，React 并不会生成三次虚拟 DOM 而是将三次 setState 合并，然后生成一次虚拟 DOM 进行比对，接下来：

  
  

• 当新的虚拟 DOM 与原来的虚拟 DOM 进行比对时，它会进行同层比较，即相同的节点层进行比较，如果不同则直接将原始虚拟 DOM 中该节点层及以下的节点全部删除，重新生成新的虚拟 DOM 节点，而不会继续向下比对。

  
  

• 这里顺便提一点，当你在 JSX 模板中遍历 state 中某个数据时，为什么不加 key 值浏览器会报错，这是因为你不再遍历的每条数据加上 key 值，更改 state 中那条数据的值，生成虚拟 DOM 后，React 就不知道原始遍历的数据和这次更新后遍历的数据一一对应的关系，就会再次重新渲染，而加上 key 值，它则能迅速比对出有差异的部分进行部分的更新，但是为什么不建议用 index 作为 key 值呢？因为当你插入 / 删除中间的数据时，从改变的那个数据开始，后续每个数据的 index 值就会变，从而就导致了每个数据的 key 值相应变化了，这样依旧会引起大规模渲染，这就是其中的原因啦。

  
  

总结：

• 这篇文章真的干货满满，上面的内容都是博主精心总结的，建议各位读者细读，必有大收获！
• Vue 2.x 的虚拟 DOM 原理和 DOM Diff算法与 React 的基本大同小异，一篇懂，全都懂！