[译] 图解 React

原文连接: learnreact.design/2017/06/08/…

喜欢理由: 插图大爱 生动有趣 视角独到

系列博客: 用通俗的语言和涂鸦来解释 React 术语

• 图解 React (本文)
• 图解 React Native
• 组件、Props 和 State
• 深刻理解 Props 和 State (待翻译)
• React Native vs. Cordova、PhoneGap、Ionic，等等 (待翻译)

React、ReactJS、React.js、React Native… 这些有些类似的名词你最近听过多少遍了？对于它们到底是什么你是否感到困惑？

若是你是一名设计师，你所在的团队使用(或正在考虑使用)的技术是 React ，或者你只是单纯对 “React” 比较好奇的话，那么本文就是为你而准备的。

在文本中，我只使用朴实的语言和插图来解释 React 家族中的各类术语，并深刻探索到底是什么使得 React 如此特别。本文中并不须要任何代码知识即可阅读。我但愿你先熟悉一些概念，从而不至于在后面的学习过程当中感到绝望。若是后面须要温故而知新的话，欢迎随时回来阅读。

准备好了吗？咱们开始了！

学习目标

读完本文后，但愿你可以从新回到这里，并可以轻松回答下列问题:

• 什么是 DOM ？
• 什么是 React ？它的哪些方面比较适合应用开发？
• React 与 jQuery 的不一样之处？
• React 的核心概念是什么？
• 什么是响应式 UI ？
• 组件有哪些好处？

关于 Web 你须要了解的

咱们先来介绍一些你可能听过不少年的术语。首先是 DOM 。

DOM

DOM 的全称是 Document Object Model (文档对象模型)。很简单吧？它就是文档对应的对象模型。

先暂时忘掉它的概念。咱们先来看看大名鼎鼎的 “Web Browser” 工做室！你能在下面的插图中找到 DOM 吗？

难道 DOM 是……一棵树？对，就是一棵树！奇怪的是，计算机相关的不少东西其实都像是一棵树。

咱们来给 DOM 起个昵称……就叫 Domo 如何？Domo 是 “Web Browser” 工做室的御用模特，他的工做就是在肖像画家(也多是数百万个画家)面前摆 pose 。

肖像就是在浏览器中浏览网站时所看见的内容。开发者的职责就比如是导演，他来告诉 Domo 该穿什么衣服，摆什么 pose 。这将决定肖像最终画出来的样子。jQuery 和 React 都是库，开发者使用它们做为与 Domo 交流的工具。

jQuery

jQuery 是一个 JavaScript 库，它可使开发者操纵 DOM 变得简单得多。那他在 Domo 的故事中又扮演什么角色呢？

它是一个工具，能够简化开发者与 Domo 沟通的过程，就像是一部手机。不管什么时候何地均可以轻松呼叫 Domo 。相比于以前(使用原生 JavaScript)，它要方便得多，还记得在电话发明出来以前人跟人连简单交流都要走得足够近才行。

多年以来，咱们一直都在使用 jQuery 来直接与 Domo 沟通。是很方便，但并不是没有问题。

React

下面请容许我来为你介绍一个全新的超级英雄: React 。

使用 React 的话，开发者再也不须要直接跟 Domo 沟通。React 扮演在开发者和 Domo 之间的中间人角色。他下降了二者之间的沟通成本，同时简化了肖像建立的过程。

React 使用了一些技术来解决 jQuery 和其余工具中所存在的问题。下面是它的三项核心技术:

• 响应式 UI
• 虚拟 DOM
• 组件

响应式 UI

使用 jQuery 来更新 DOM 的话，你须要在适当的时机以正确的顺序来指定要更改的元素。这等同于给 Domo 一步步讲述头怎么摆、胳膊放在哪、腿什么姿式，等等，而且每张肖像都是如此。

我靠，这听起来太乏味了，而且容易出错！为何不直接告诉 Domo 你想要的效果，而不是如今这样一步步地告诉他怎么摆 pose ?

还有更酷的，想象一下若是能够在要求过程当中保留一个占位符来表示相同姿式的不一样变体。React 就能作到！

这种方式的话，当画家要求 Domo 穿戴不用的帽子做画时，你不须要每次都告诉 Domo 戴哪顶帽子。你尽管坐在一旁让他本身换帽子便可。

这项技术正是 React 名字的由来。使用 React 构建的 UI 是响应式的。做为开发者，你只需编写你想要的是什么，React 本身会弄清楚该怎么作。当数据变化时，UI 会相应地发生改变。你无需再关心 DOM 的更新，React 会自动帮你完成。响应式 UI 的理念大大地简化了 UI 开发。

我知道我说过你不须要任何编码知识，但只是为了帮助你正确地看待问题，我仍是用代码把它写了出来。请查看下面的示例(尝试更换 Domo 的帽子)):

Codepen 在线 Demo: Domo 的帽子 。

在后面的文章中我会来说解完整的代码，但此时你只需简单看一眼关键代码便可:

const ThinkerWithHat = ({ hat }) => (
  <div> <Hat type={hat} /> <Thinker /> </div> ); 复制代码

注意，你只需定义你想要的 (戴帽子的思想者)，并“链接”上数据 (“type = {hat}”) 。当数据发生变化时 (用户选择一顶帽子)，UI 会自动更新。

虚拟 DOM

jQuery 的另外一个问题就是它的运行速度。

做为一个严苛的导演，你讨厌等待。你想要肖像画尽量快地完成。可是，Domo 和画家都比较慢，并不是是树濑那种慢，只是 Domo 须要时间来换装和摆 pose ，而且画家做画也须要时间。

更糟糕的是，在画家完成一幅肖像画以前，你没法与 Domo 进行沟通。事实上，你什么也作不了，除了等待。真浪费时间！

React 采用了另外一项技术来解决此问题。React 画草稿的速度超级快。是当你告诉他你的要求后，他几乎就能当即将草稿完成并准备画下一张。如今就无需等待了！你能够不停地告诉 React 你想的肖像。React 将会纪录草稿的全部细节，并在适当的时候展现给 Domo 看。

更重要的一点是 React 十分聪明。他还会对全部草稿进行整理，拿掉重复的并确保 Domo 和画家的工做量维持在最低水平。

这些草稿就是 “虚拟 DOM” 。虚拟 DOM 要比操纵 DOM 快得多得多。开发者绝大部分时间里其实都是在操纵虚拟 DOM ，而不是直接操纵真实的 DOM 。React 负责管理 DOM 的这部分脏活。

组件

React 中第三项技术就是组件的概念。

组件应该很容易理解，由于咱们所生活的现实世界就是由组件组成的。咱们的车、房，甚至是身体都是由不一样的组件所组合而成的。这些组件又是由一些更小的组件组合而成，以此类推，直至分解成原子。

若是你熟悉 Sketch (译者注: 著名的设计软件，与 PhotoShop 齐名) 的话，组件与 Sketch 中的 symbols 十分相似。构建 React 应用几乎都是在同组件打交道: 寻找最适合的组件、融合两个组件、在现有组件的基础上建立新组件，等等。

回到 “Web Browser” 工做室，你将肖像的需求描述成一个个组件，React 将这些组件翻译成 Domo 所能理解的内容。这将为你节省大量时间，由于你无需再一次次地重复描述需求中的通用部分。

组件另外很酷的一点是若是你改变了某个组件，那么全部使用此组件的地方都将自动更新。

总结

好了。但愿你能学会一些 React 的知识。本质上，它仍是一个工具，用来帮助开发者操纵 DOM ，从而构建出页面。响应式 UI 、虚拟 DOM 和组件是 React 的三大核心概念，正是有了它们才使得 React 如此特别。固然，React 还有一些其余有趣的概念，好比单向数据流，我会在后面的文章中介绍。

在下一篇文章中，咱们将介绍 ReactJS、React Native 和 React Sketch.app 之间的关联和区别。

我鼓励你回到学习目标那里，去试试本身是否可以回答出所有问题。若是你有任何问题或意见，请给我留言!