React进阶笔记【5_虚拟 DOM】

2022/4/5 ReactJS

# 为什么需要虚拟DOM?

“DOM 操作是很慢的,而 JS 却可以很快,直接操作 DOM 可能会导致频繁的回流和重绘,JS 不存在这些问题,因此虚拟 DOM 比原生 DOM 更快。“

# 本质

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

# 如何工作

  1. 挂载阶段

    React 将结合 JSX 的描述,构建出虚拟 DOM 树,然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射(触发渲染流水线)。

  2. 更新阶段

    页面的变化会先作用于虚拟 DOM,虚拟 DOM 将在JS 层借助算法先对比出具体有哪些真实 DOM 需要被改变,然后再将这些改变作用于真实 DOM。

# 虚拟 DOM 的价值

  1. 研发体验/效率
  2. 跨平台
  3. 批量更新(batch函数,缓冲每次生成的补丁集)

# 相关资料

虚拟 DOM 和差异算法 (opens new window)