图解 | 后端程序员，你把React理解到这一步就够了！

React 到底是什么什么它那么受欢迎到底解决了什么问题/h2>

答案：React 是一个用于构建用户界面的、 声明式、组件化的 JavaScript 库。

JavaScript 库明式件化是说好了是小白秘籍吗/p>

好吧，上面那行字是从官方 站拷过来拼凑的。接下来，让我用另一种方式为你讲解 React。很负责任地说，只要你对 HTML 有大致的了解（例如，HTML 标签的格式），应该就能看懂这篇文章、理解 React 的核心概念。不懂 JavaScript全没问题！

具体什么方式呢卖个关子放几个表情符：

来，跟我一起到高处俯瞰 React 的全貌，然后拿起望远镜，拉近、放大、观察细节，挽起袖子写一个真正的 React 组件。没错，不懂 JavaScript 也照样写！

准备好启程了吗/p>

Web 二三事

第一站，我们先从一个你或许听说过很多次的概念说起：DOM。

DOM 是什么/p>

当你将一个 址输入浏览器的时候，你的电脑和远方的另一台电脑就开始对话。这台远方的电脑一般被称之为服务器。你的电脑发出请求，向服务器索取某种信息，服务器随即做出应答：

你的电脑： 伙计，这个 站靠不靠谱啊址是：learnreact.design

服务器： 少安毋躁，让我查查。嘀。嘟。

服务器的应答数据主要包括了三个部分：HTML、CSS 和 JavaScript。

HTML 列举出一个 页的内容并描述其结构。例如，页面上有多少个标题和段落用户显示什么图片个按钮和那个文本输入框是不是应该放到同一个容器里/p>

利用 HTML 里的信息，浏览器将会创建一个叫做 DOM 的家伙。

DOM 是 Document Object Model 的缩写。从某种意义上说，它确实是一个模特，更确切地说是模型、 页文档的模型。当 DOM 摆出一个姿势时，浏览器就开始写生。这些所谓的写生画就是我们在 页上所看到的内容：文本框、段落、图片等等。程序员的职责就是告诉朵模如何穿戴和如何摆姿势。这就决定了 页上最终显示什么内容。

如果你使用桌面电脑的浏览器（如 Chrome）看这篇文章，在页面上右击鼠标、选择“Inspect”，就可以在 Element 标签页里看到 DOM 的真实模样。

程序员们使用 JavaScript 书写代码来向 DOM API 下达命令，于是， 页内容便随着 DOM 的更改而发生变化。

越来越复杂的 web 开发

多年来，直接与 DOM 对话一直是 web 开发的标准方法，特别是当大多数 web 内容是静态页面的时候。程序员们典型的做法是，在静态页面的基础上加一点点 JavaScript 代码来点缀一些交互效果。

然而，当众多的 SPA （Single Page Application）出现后，例如，Gmail 和 Google 地图，用户们开始对 web 有了更高的期望。他们不再只满足于大多数情况下都是静态的 web页面，他们更希望看到的是交互性强、响应迅速的 web 应用。

为了开发满足这些条件的 web 应用，代码变得越来越复杂，与 DOM 直接对话这种方式越来越显得低效而繁琐，Web 开发的传统方法越来越显得捉襟见肘。人们开始寻找更高效、更便捷的开发方法。

在 React 的帮助下，程序员们不再直接与朵模对话。React 充当起了程序员的代言人。他让程序员与朵模之间的沟通变得无比顺畅，将写生的过程管理得井井有条。

使用 React 写程序的时候，几乎所有的时间都是在跟组件打交道：将整个应用分割为组件、寻找最合适的组件、将不同组件拼装起来、在原有组件基础上制作新组件，如此等等。

现今的设计工具也支持组件功能，例如 Framer 和 Figma，再如 Sketch 中的 symbol。这些组件与 React 中的组件属于同一个概念，只不过后者更加灵活和功能强大。事实上，这些工具中组件的设计灵感直接来自于软件工程中的组件概念。

一旦一个组件创建完成，我们可以多次使用它（创建组件实例），可以用这个组件创建另外的组件。当一个组件发生变动时，包含这个组件的所有其他组件也会自动发生相应变化。

React 组件有两条重要的属性：

1. 组件是可组合的（composable）。组件的目的在于重用，我们可以使用现有组件创建新组件。

2. 一个组件独立于其它组件（independent）。当修改一个组件时，不相干的组件不会受到干扰。

太抽象担心，等会看了例子你就明白了。

声明式用户界面（Declarative UI）

命令式与声明式

当直接操作 DOM API 时，我们需要明确写出在具体什么时刻、以何种顺序来修改哪个元素。这种操作就像手把手、一步一步地指导朵模该怎么摆姿势：头该怎么偏、手摆哪儿、脚怎么站。

因为我们编写的应用是动态的，我们经常希望朵模很快速地变换姿势。于是我们就一次性画很多简图拿给 React。React 将这些简图摞成一叠，像看手翻书一样手指一翻，一个动态的用户界面就跃然眼前了！

这些所谓的简图被称为虚拟 DOM。操作虚拟 DOM 比操作正常的 DOM 要快捷很多，程序员们大部分时候都是在跟虚拟 DOM 打交道，由 React 来代理管理那缓慢的 DOM。

响应式 DOM 更新（Reactive DOM updates）

更炫的是，想像一下如果我们能在简图里留下一些占位空白来代表同一个姿势的变体。这样的话，当有人索要朵模戴不同帽子的写生画时，我们就不需要再次跟 React 沟通，只需要坐下来看着 React 为我们更换就行了。

组件的可组合特性

我们可以将整个界面拆分为如下三个部分：

• Header: 页面顶部

• Main: 页面的主要内容

• Footer: 页面底部注脚

这个拆分方案可以用如下代码表达: