React是啥东东？

React, ReactJS, React.js, React Native… 这些词儿你最近听到过无数次了吧？耳熟归耳熟，这个 React 到底是什么你知道吗？究竟是什么让 React 这么 Diao？为啥这么多人用 React？

如果你是一名 UI 设计师，你的团队正在 (或正准备) 用 React 来开发产品，那么你来对地方了！这篇文章就是给你写的。你不需要任何编程基础，读文章看漫画就行了！

闲话少说，马上开掰！

学习目标

在读完整篇文章后，我建议你到这里来回答下面这些问题：

DOM 是什么？

React 是什么? 为何它适合被用来开发 app?

React 和 jQuery 有何不同?

React 的核心概念是什么?

为什么我们需要虚拟 DOM（Virtual DOM）?

Reactive UI（Reactive 界面）是什么?

使用组件有哪些优点？

关于网络的二三事

让我们先从几个跟网络有关的名词开始。第一个是 DOM。

DOM

嗯…DOM 是英文 Document Object Model 的缩写。翻译出来就是“文档对象模型”，简单吧？

什么？没搞懂？这样吧，让我们先来参观一间著名的画室。这间画室的名字叫——“网络浏览器”。你能在下面的“网络浏览器”画室中找到 DOM 的身影吗？

所以，DOM 就是…一棵树？是的，一棵树！我知道，这听起来有点奇怪，但其实在你电脑里有很多的东西看上去都像树。

OK，计算机当然不是装了一堆树枝的垃圾桶。这个“树”的称谓实际上来源于计算机中信息的组织方式。参照这种信息结构，人们画出的图看起来像倒立着的一棵棵树。

我们不妨给 DOM 取一个绰号…嗯…就叫“多模”怎样？“多模”在“网络浏览器”画室里就像是扮演着人体模特的角色（哦，不对，树体模特）。他的工作就是在画家面前摆出各种姿势，让画家给他画一幅人体树体写生（也可能是上百万幅！）

这些“树体写生”画就是我们在浏览网页时所看到的内容。程序员在这个画室中的工作就像是在指导“多模”穿什么和摆什么姿势。这决定了这些“人体写生”最后呈现出来的样子。jQuery 或 React 则被称作资源库（library），他们是程序员用来和“多模”进行沟通的工具。

jQuery

jQuery 是一个 JavaScript 的资源库。它使程序员能更加轻松地操控 DOM。让我们再次请出咱们的模特“多模”。jQuery 就如同程序员的一部手机，它是程序员用来跟“多模”聊天的一种工具。无论程序员身在何处或是想要什么，他都能拿着这部手机跟“多模”进行通话。这实在是比过去从头用 JavaScript 针对不同的浏览器编程方便多了 —— 还记得吗？在电话发明之前，人们只有面对面接触才能进行对话。

多年以来，我们一直都在使用 jQuery 来直接和“多模”沟通。这挺方便的，但问题也不少。

React

好，咱们的新新超级英雄出场 —— React：

有了 React，程序员就不再需要和“多模”直接通话了。React 在程序员和“多模”之间扮演了一个经纪人的角色。React 这个经纪人保证了整个沟通环节流畅，并简化了“树体写生”的过程。

React 有很多用来解决 jQuery 和其他工具问题的法宝。下面是其中最主要的三件：

Reactive 界面

虚拟 DOM

组件

Reactive 界面

如果是用 jQuery 来更新 DOM，你必须详细指出要更改哪个元素，并且要在正确的时间，以正确的顺序发出指令。这相当于告知“多模”如何一步一步的摆放好他的头、手和脚，如何摆好各个肢体的位置以供画好每一幅画。

哎呀，这听起来是不是很无聊，而且又很容易出错！ 为什么非要不厌其烦的告诉“多模”怎么摆姿势？为什么不能直接告诉他你最终想要什么样的姿势？

用装 B 的技术术语来说，如果一段代码表达的是“你最终想要什么”，那么它就被称为“声明式”（declarative）。反之，如果一段代码表达的是“怎么去做”，那么它就被称为”命令式“（imperative）。命令式编程发源于计算机早期时代，那时候计算机还很原始，人们只能一步一步教它如何完成工作：在哪儿存储数据、怎么做乘法，等等。这种编程方式刚开始没啥问题，但随着计算机日趋复杂变得越来越繁琐。人们于是编写了聪明的软件自动地将问题描述转化成具体的指令，这样，声明式编程就诞生了！今天，越来越多的编程语言和框架（比如 React）采用了这种声明式编程的方式。

React 还有更炫的一招。想象一下，假如在告诉多模摆什么姿势的时候，你在中间留几个空，比如，把需要戴的帽子留成一个空，当有人需要“多模”换戴一顶不同的帽子时，你不必再亲自跑去告诉“多模”，完全可以让他自己去换帽子嘛！

这一招就是 React 这个名字的来由。使用 React 构建的用户界面被称作是 Reactive 界面。 作为一名开发人员，你只需要写下你想要什么，React 帮你搞定如何去实现。 当数据发生变化时，你的用户界面会相应的改变。 你不必担心具体怎么去更新 DOM，React 会自动为你办到。 Reactive 界面技术极大地简化了用户界面的开发过程。

我之前说过你不需要任何编程知识。现在我要给你看的下面这个例子里会出现一些代码。但是不要担心，先试试换一下下面这个链接里“多模”的帽子（长按选择链接，用浏览器打开）。

https://codepen.io/focuser/embed/gROrXx?height=374

我会在以后解释所有这些代码的含义。此刻你只需要看看这段代码的核心部分：

请注意，你只需要定义你所想要的“姿势” （这里的姿势是一个带着帽子的思考者 Thinker），并提供数据（””）. 当数据发生改变时（用户选择好了另一顶帽子），用户界面就会自动更新了。

虚拟 DOM（Virtual DOM）

jQuery 的另外一个问题是速度太慢。

作为一个高要求的现场指导，谁都想要这些“树体写生”画尽快的画好，谁喜欢等啊！遗憾的是，“多模”和画家都是很慢的。当然我并不说他们慢得像树懒那样，但是“多模”需要花时间换衣服和摆姿势，画家也需要花时间画画。更糟糕的是，在画家完成每一幅画之前，你是不能和“多模”说话的。实际上这时你除了傻等以外其他什么也做不了。太浪费时间了！

React 有办法来改进速度问题。他可以非常迅速的画出草图。在你刚刚告诉完他要求的时候，他差不多就已经画完了一幅草图并且准备好了画下一幅。现在，你不需要再等待了！你能一直持续地告诉 React 你想要什么样的画，没有任何停顿。而且 React 会把每一张草图的记录保存下来，并且会在恰当的时间把草图给“多模”看。

更重要的是，React 多聪明啊，他能把这些草图排序，并且移除掉所有重复的草图，以此来保证“多模”和画家做尽可能少的工作。

这些草图被叫做“虚拟 DOM”（Virtual DOM）。虚拟 DOM 操控起来比 DOM 要快得多。程序员其实大多数时间是在和虚拟 DOM 打交道，而不是直接管理 DOM。React 把那些管理 DOM 时所需要做的繁琐工作都一股脑地接管了过去。

组件（Components）

React 的第三个法宝是组件。

组件比较容易理解，因为我们的真实世界就是由组件构成的。汽车、房子、我们的身体，都是由各种具有不同功能的组件构成。大组件由小组件构成，小组件又由更小的组件构成，最后可以小到诸如原子这样的微观粒子。

如果你熟悉 sketch 这个软件，你就知道组件看起来很像 sketch 里的“Symbol”。如果要在 React 里创建一个 app，你基本上就会一直做和组件相关的事情，比如：为完成某个任务找到最合适的组件、把不同的组件组合在一起、在已有的组件基础上创建新的组件，等等。

在我们的“网络浏览器”画室里，你是以组件的形式来描述树体写生画的要求的，React 再把组件进行翻译，以便让“多模”能够理解。这样就节约了很多时间，因为这样你就不必再重复描述那些通用的部分了。

关于组件的另外一件很酷的事情就是：如果你更改了一个组件，那么所有包含这个组件的东西都将会自动更新。

总结

好了，希望你现在已经对 React 有了一定的了解。它是程序员用来创建用户界面的一个工具。Reactive 界面、虚拟 DOM 以及组件这三个核心概念使得 React 独具魅力。当然 React 还有一些其他有趣的东西，比如单向数据流（unidirectional data flow）等等，我将在以后跟大家讲讲。

我建议你现在回到前面的学习目标章节去看看你是否能回答所有的问题。如果你有任何问题或者看法，欢迎留言！

（插图：Beebee）