理解 Virtual DOM 内部工作机制
本章节，大喵将带着大家，深入了解下我们常用的MVVM框架的核心虚拟DOM的工作原理；相信大家对虚拟DOM的认识，并不陌生，目前莱索很多跨平台前端产品的诞生都是由于虚拟DOM的盛行，才会产生这么多跨平台开发框架；所以熟悉和了解Virtual DOM对一名前端开发工程师来说，是非常有必要的。所以跟着大喵一起来学习研究吧 ~
参考资料：
- https://segmentfault.com/a/1190000010157277
- https://segmentfault.com/a/1190000016647776
简单搜索列表结构
这是一个简单地可筛选的搜索应用，它包含了两个组件FilteredList和List。List组件用来渲染一组items(默认：“California"和"New York”)。这个应用有一个搜索框，可以根据字母来过滤列表项。展示非常地直观：
从上面的结构图片我们可以观察到3部分的结构，“真实DOM”、“DOM tree 树”、“VDOM 虚拟DOm对象”，非常直观，从上面的结构，我们可以得出结论，虚拟DOM就是一个js对象，一个用来描述DOM树的javascript对象，我们需要更新这个对象，然后去更新我们页面中的DOM结构。
JSX转换成DOM的过程
我们使用jsx来写组件，它会被babel转换成纯js，然后Preact的h函数会将这段js转换成DOM树，最后Preact的Virtual DOM算法会最终转换成真实的DOM树，来构建我们的应用。
Babel 和 JSX
在React，Preact这样的类库中，没有HTML标签，取而代之的是，一切都是javascript。所以，我们会像下面这样来写HTML：
这就是jsx的由来。jsx本质上就是允许我们在javascript中书写HTML!并且允许我们在HTML中通过使用花括号来使用js。jsx帮助我们像下面这样写组件：
Jsx 转换成 Js
jsx很酷，但它不是合法的js，并且最终我们需要的是真实的DOM。JSX只是帮助编写一个真实DOM的替代品，除此之外，它别无用处。所以我们需要一种方法将它转换成对应的JSON对象(也就是Virtual DOM)，作为转化成真实DOM的输入。我们需要一个函数来实现这个功能。
在Preact中h函数就是干这件事情的，等同于React中的React.createElement。
但是如何将jsx转换成h函数的调用呢？Babel就是干这件事情的。Babel遍历每个jsx节点，并将它们转换成h函数调用。
Babel JSX(React vs Preact)
默认情况下，Babel将jsx转换成React.createElement调用
但是我们可以很容易地将函数名修改成任何名称，只需要在·babelrc中配置一下即可
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
不仅仅是render中的代码会被转换成h函数，最初的挂载也会！这就是代码执行开始的地方：
//Mount to real DOM
render(<FilteredList/>, document.getElementById(‘app’));
//Converted to "h":
render(h(FilteredList), document.getElementById(‘app’));
h函数的输出
h函数将jsx转化后的内容转换成Virtual DOM节点。一个Preact的Virtual DOM节点就是一个简单的代表了单个包含属性和子节点的DOM节点的js对象，如下所示：
{
"nodeName": "",
"attributes": {},
"children": []
}
比如，应用的input标签对应的Virtual DOM如下：
{
"nodeName": "input",
"attributes": {
"type": "text",
"placeholder": "Search",
"onChange": ""
},
"children": []
}
注意：h函数并不是创建整棵树！
Preact中的Virtual DOM算法
在下面的流程图中，展示了在Preact
中，组件是如何被创建、更新和删除的过程。同时也展示了像componentWillMount这样的生命周期事件是什么时候被调用的。
