知识共享许可协议

Vitual DOM 的内部工作原理

原文:The Inner Workings Of Virtual DOM

Preact VDOM 工作流程图

Preact VDOM 工作流程图

虚拟DOM (VDOM,也称为 VNode) 是非常神奇的,同时也是复杂难懂的。 ReactPreact 以及其他类似的 JS 库都使用了虚拟 DOM 技术作为内核。可惜我找不到任何靠谱的文章或者文档可以简单又清楚解释清虚拟DOM的内部细节。所以,我就想到自己动手写一篇。

注:这是一篇很长的博客。为了让内容更容易理解,我添加了很多图片。这也导致这篇博客看上去更长了。

在这篇博客中,我是基于 Preact 的代码和 VDOM 机制来介绍的。因为 Preact 代码量更少,你在以后也可以不费力地自己看看源码。但是我觉得绝大部分的概念也同样适用于 React。

我希望读者通过这篇博客可以更好地理解虚拟DOM,并期待你们可以为 React 和 Preact 等开源项目提供贡献。

在这篇博客中,我会通过一个简单的例子来仔细地介绍虚拟DOM的每个场景,给大家虚拟DOM是如何工作的。特别地,我会介绍以下内容:

  1. Babel 和 JSX
  2. 创建 VNode – 单个虚拟 DOM 元素
  3. 处理组件和子组件
  4. 初始渲染和创建 DOM 元素
  5. 再次渲染
  6. 删除 DOM 元素
  7. 替换 DOM 元素
阅读全部