注意：这篇文章假定你熟悉模板技术，至少使用过像art-template或ejs这样的简单模板

当然，这意味着你应该具备一些JS基础，对DOM操作足够熟练

同时，这篇文章要求你具备基本的面向对象思想，不清楚的可参考视频教程（不懂装懂系列）

由于React特殊语法要求，这篇文章要求你需要熟悉ES6的面向对象语法

模板的作用？

例如下面这个模板：

我们准备好一份数据：

将数据填充至模板，生成 HTML 页面：

当数据频繁改变时，会带来什么问题？

每一次数据改变，我们都需要将最新的数据 重新 填充模板

然后将生成的 HTML 文本 重新 append 到页面上进行渲染

我们不禁要问：难道没有更简单的方式？

于是我们有了下面的解决方案：

如果我们能将模板与数据绑定在一起，当数据变化时

自动填充模板并更新页面。

这样一来，我们只要操作数据，页面内容就可以实时产生变化了。

这就是 react 这个基于模板技术的框架给我们带来的好处。

React 组件化到底是什么东西？

首先我们必须要先问一个问题。

什么是组件？

我们再回过头看刚才的那个模板，它可以称得上一个组件吗？

虽然这个模板是可复用的，但把它叫做一个组件，恐怕还远远谈不上。

为什么呢？ 这还要看我们如何来定义，什么是组件？

所谓组件，指的是高度可复用的动态模板

而我们之前的模板，缺乏了 3 个重要的条件

• 第一，它没有做到数据绑定，当数据改变时，页面不能够自动更新。

• 第二，它无法保存页面中的交互动作。例如鼠标的划入、单击事件等等。

• 第三，模板和模板之间不能够相互嵌套或引用，无法达到复用的最大化。

而 React 编写的组件，搞定了上述所有问题。

为什么 React 标准语法推荐使用 ES6？

这还得从我们的面向对象思想说起

我们都知道类和对象之间的关系

如果把类看作是一个模板，那么通过这个模板，我们可以无限次的 实例化（new）对象。

在面向对象当中，我们的类，就相当于一个高度可复用的组件

于是就有了下面的语法

我们使用 Class 来定义一个组件，每个组件必须有一个 render 方法用来渲染页面

而在 render 方法里，我们可以像往常一样编写我们的模板内容 ↓↓↓

不仅如此，我们连单击函数也保存在了组件当中 ↓↓↓

组件当中的数据，可以通过构造函数来进行传递。 ↓↓↓

最后，我们通过 ES6 的模块化语法，将该组件以模块的形式暴露出去，让别的组件可以引用。 ↓↓↓

引入组件之后，我们可以像写 HTML 标签那样，使用这个组件 ↓↓↓

好了，以上就是一个 React 组件的标准写法，是不是很简单呢？

React 中的虚拟 DOM 是怎么一回事？

回到我们之前说的数据绑定的问题上来

假设，我们现在有一个组件，DOM 结构如下

目前，虽然 React 已经可以做到，在数据改变时，页面可以自动的实时更新

但是 这仍然没能解决一个问题

当组件中任何一点小小的数据发生改变的时候，我们都需要将整个组件重新渲染一次，才能让页面更新。

这会给浏览器带来巨大的工作负担，很显然这也是不必要的。

于是，React 引入了虚拟 DOM 技术

首先，在内存中构建一棵对象树，这棵树的结构跟 DOM 结构一致。

每个对象对应一个 DOM 节点，并保存这个节点的所有信息（理论上包括事件）

我们管这棵对象树，也叫做虚拟 DOM 树

接下来，当数据发生改变的时候，

React 会再次生成一棵新的虚拟 DOM 树

接下来，React 会扫描这两棵虚拟 DOM 树的节点

最终将所有发生改变的节点记录下来

最终 React 会将发生改变的 DOM 节点做更新，而不会更新整个组件

这就是虚拟 DOM 提升性能的原理。

总结一下 React 的特点：