【React进阶系列】从零开始手把手教你实现一个Virtual DOM（一）

假如你的项目使用了React，你知道怎么作性能优化吗？
你知道为何React让你写shouldComponentUpdate或者React.PureComponent吗？
你知道为何React让你写Immutable Data Structures吗？
你知道为何React让你在渲染列表时，必定要给每一个子项加一个key吗？
你知道为何React让你在条件渲染时，不写if而写&&操做符或三元操做符吗？

一切的答案都在Virtual DOM上！
只要你跟着我完成了这个手写Virtual DOM的系列，上面的全部问题你都将获得解答，今后进入react高手的阵营！

---

如今当咱们谈virtual DOM (VDOM)的时候，一般会将React捆绑在一块儿谈。可实际上VDOM并非React创造的，React将这个概念拿过来之后融会贯通慢慢地成为目前前端最煊赫一时的框架之一。

什么是VDOM？

首先咱们都知道什么是DOM(Document Object Model)，简单说就是将一个HTML文档抽象表达为树结构。VDOM则是将DOM再抽象一层生成的简化版js对象，这个对象也拥有DOM上的一些属性，好比id, class等，但它是彻底脱离于浏览器而存在的。

为何要用VDOM？

随着前端技术的发展，如今的网页应用变得愈来愈庞大，DOM树也随之变得复杂。当咱们要修改DOM的某个元素时，咱们须要先遍历找个这个元素，而后才修改能修改。并且若是咱们大量地去修改DOM，每次DOM修改浏览器就得重绘（repaint）页面，有的时候甚至还得重排(reflow)页面，浏览器的重排重绘是很损耗性能的。

React是怎么用VDOM解决这个问题的呢？

1. 首先，在React当咱们要去修改数据的时候，咱们会调用React提供的setState方法来修改数据；
2. React根据新的数据生成一个新的VDOM，由于VDOM本质上只是一个普通的js对象，因此这个过程是很快的；
3. 而后React拿着新生成VDOM和以前的VDOM进行对比（diff算法），找出不一样的地方(新增，删除，修改)，生成一个个的补丁（patches）;
4. 最后React把这些补丁一次性打到DOM上，完成视图的修改。

原理其实仍是很直观的，但React究竟是怎么用代码实现的呢？其中最关键的一步是React是怎么diff的？若是搞清楚了内部的实现原理，对于咱们使用React来写出性能更高的代码相当重要。因此今天我要手把手教你们怎么从零开始实现VDOM。

咱们的设计蓝图

咱们将采用跟React相似的方式

1. 使用JSX来编写组件；
2. 用Babel将JSX转化为纯js(相似hyperscript)；
3. 将hyperscript转化成咱们的VDOM；
4. 将VDOM渲染到页面，造成真实的DOM；
5. 手动更新数据并手动触发更新视图操做(这部分是react作的，跟VDOM的实现无关，因此咱们手动模拟一下)；
6. 重复步骤二和步骤三，获得新的VDOM；
7. diff新VDOM和旧VDOM，获得须要修改真实DOM的patches；
8. 把patches一次性打到DOM上，只更新DOM上须要更改的地方。

下面咱们开始正式进入写代码环节，建议你们打开编辑器跟着我一步一步的敲代码。这样手把手教你敲代码的的博主你去哪里找？还不抓住这个百年不遇的机会？???

项目结构

1. index.html
2. index.js(全部的逻辑都写在这个文件里)
3. .babelrc（babel的配置页）
4. package.json
5. compiled.js (这个文件是babel打包本身生成的，不须要本身写)

你们能够新建一个目录，而后新建1-4这四个文件

从零开始手把手教你实现一个Virtual DOM（二）