深入研究 Virtual DOM深入研究 Virtual DOM

对Virtual DOM这个名词并不陌生，但是有什么深入的理解谈不上。看到medium上rajaraodv写的 The Inner Workings Of Virtual DOM这篇文章，比较深入的介绍了Virtual DOM的各个方面，在此翻译一下。

这篇文章比较简单，在翻译的过程中都不需要google翻译，但是图片比较多。

Virtual DOM (VDOM 也叫 VNode) 很魔幻 ✨，但是也很复杂以至于让人难以理解😱。像React，Preact这些js的库都用到了Virtual DOM。不幸的是，我没有找到任何一篇深入浅出的解释VDOM文章或者文档，所以我决定自己写一篇。

注意：这篇文章很长，为了更通俗易懂，我加了很多图片，同时也使这也是这篇文章很长。

我用了Preact的代码，希望将来你很容易看懂，但是我觉得大多数情况下也适用于React。我希望读到这篇文章的人能更好的理解React和Preact，也为他们的发展做出一点贡献

本文会举一个简单的例子，然后介绍不同的场景，让你理解他们是怎么样运行的：

Babel 和 JSX
创建虚拟节点-只是一个单一的虚拟DOM元素
处理组件和子组件
初始渲染和创建DOM元素
重新渲染
删掉DOM元素
替换DOM元素

这个App是一个简单的可过滤搜索器。包含“FilteredList”和“List”两个组件。List组件渲染了一个列表（默认值是“California”和“New York”）。App还有一个搜索框，通过在搜索框里输入文字来过滤列表。

首先，我们用JSX来写组件，然后用Babel的CLI工具转成纯JS。然后用Preact的 “h” (hyperscript)函数转成VDOM树。最终Preact的Virtual DOM算法把VDOM转换成真正的DOM，这样就生成了我们的App。

在了解VDOM的生命周期之前，先来了解一下JSX.

Babel和JSX

在React和Preact这些库里，没有html，只有JavaScript。所以我们需要在JavaScript里写html，但是在纯js里写DOM简直是噩梦😱

对我们的App来说，html像下面这样

这就是jsx，允许你在JavaScript里写html，然后也可以在{}里使用JavaScript。

用jsx写组件就很容易：

把jsx转换成JavaScript

jsx很酷，但是不是有效的JS，浏览器不支持。我们需要的是真实的DOM。JSX仅仅是在写DOM的表现层的时候有用。
所以我们需要一个函数来把jsx转换成相应的JSON对象（VDOM,也是一个树形结构），然后我们可以把这个json对象作为创建真实DOM的输入。

这个函数就叫h，和React里的 React.createElement是一样的功能。

“h” 代表hyperscript

怎么样把jsx转换成h函数呢，这就是Babel干的事情。Babel遍历每一个JSX节点，把他们转换成h函数的调用

Babel JSX (React Vs Preact)

Babel默认会把jsx转成React.createElement调用，因为默认是React。

但是我们也能通过添加 Babel编译宏，把这个函数的名字改成任何我们想要的名字：

Option 1:
//.babelrc
{   "plugins": [
      ["transform-react-jsx", { "pragma": "h" }]
     ] 
}
Option 2:
//Add the below comment as the 1st line in every JSX file
/** @jsx h */

挂载到真实的DOM

starting mount和render函数都被转换到了h函数里，这是一切的开端：

//Mount to real DOM
render(, document.getElementById(‘app’));
//Converted to "h":
render(h(FilteredList), document.getElementById(‘app’));

h函数的输出

h函数接收Babel转换后的JSX，创建一个叫“VNode”的节点（React通过“createElement”创建ReactElement）一个Preact的“VNode”（或者是React的“Element”）就是一个包含自身属性和子元素的DOM节点，看起来像这样：

{
   "nodeName": "",
   "attributes": {},
   "children": []
}

举个🌰，我们的App的DOM节点看起来像这样：

{
   "nodeName": "input",
   "attributes": {
    "type": "text",
    "placeholder": "Search",
    "onChange": ""
   },
   "children": []
}

注意：h函数并不会创建整个DOM树，对于指定的节点，只创建一个js的对象，但是因为render函数的参数是一个树形的DOM，最终的VNode看上去就像一棵树

相关代码：
h： github.com/developit/p…
VNode： github.com/developit/p…
render： github.com/developit/p…
buildComponentFromVNode： github.com/developit/p…