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

2019-04-17 本文已影响32人饮杯梦回酒

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

首先当改变 state 数据时，由于 setState 是一个异步函数（官方文档原话：不保证它是同步的），这里关于异步的问题我们暂时这么理解，如果深究可以自行去其他博客学习，当你一次调用三次 setState 时，React 并不会生成三次虚拟 DOM 而是将三次 setState 合并，然后生成一次虚拟 DOM 进行比对，接下来：
当新的虚拟 DOM 与原来的虚拟 DOM 进行比对时，它会进行同层比较，即相同的节点层进行比较，如果不同则直接将原始虚拟 DOM 中该节点层及以下的节点全部删除，重新生成新的虚拟 DOM 节点，而不会继续向下比对。
这里顺便提一点，当你在 JSX 模板中遍历 state 中某个数据时，为什么不加 key 值浏览器会报错，这是因为你不再遍历的每条数据加上 key 值，更改 state 中那条数据的值，生成虚拟 DOM 后，React 就不知道原始遍历的数据和这次更新后遍历的数据一一对应的关系，就会再次重新渲染，而加上 key 值，它则能迅速比对出有差异的部分进行部分的更新，但是为什么不建议用 index 作为 key 值呢？因为当你插入 / 删除中间的数据时，从改变的那个数据开始，后续每个数据的 index 值就会变，从而就导致了每个数据的 key 值相应变化了，这样依旧会引起大规模渲染，这就是其中的原因啦。