---
title: React
localeTitle: React
---
# React
React是一个用于构建用户界面的JavaScript库。在Stack Overflow 2017年开发者调查别评为最受欢迎的“框架，库和其他技术”之一。
React是一个JavaScript库，构建在它上面的React应用程序在浏览器中运行，而不是在服务器上运行。这种应用程序仅在必要时与服务器通信，这使得它们与传统网站相比更快，用户从此不必等待服务器重新渲染整个页面并将其发送到浏览器。
React用于构建用户界面 - 用户在屏幕上看到并与之交互来使用React编写的的Web应用程序。用户界面将被分成几个称为组件的较小部分。更一般地说，这种方法称为模块化。
* 它是声明性的：React使用声明性范例，使您更容易理解您的应用程序。
* 高效率：React计算保持DOM最新所需的最小变更集。
* 灵活性：React可以与您已经知道的其它库和框架一起使用。
## 为什么要学习React？
1. React涉及组合，其中包含许多组件，将功能包装到封装容器中。 许多流行的网站使用React实现MVC架构模式。 Facebook（部分），Instagram（完全），可汗学院（部分），Codecademy（部分），纽约时报（部分），雅虎邮箱（完全），Dropbox的新照片和视频库应用程序Carousel（完全）是已知的热门网站使用React。 如何使用React构建这些大型应用程序？简单的答案是构建小型应用程序或组件。 例：
```jsx
const Component2 = () => {
return (
);
};
const Component3 = () => {
return (
);
};
const Component1 = () => {
return (
);
};
ReactDOM.render(
,
document.getElementById("app")
);
```
2. 在大多数情况下，React是声明性的，我们更关心的是做什么而不是如何做特定的任务。声明性编程是一种编程范例，表示计算的逻辑而不描述其控制流。 声明性编程具有某些优点，例如减少副作用（当我们修改任何状态或改变某些东西或发出API请求时发生），最小化可变性（大量抽象），增强的可读性，较小的错误。
3. 单向数据流。 React中的UI实际上是状态依赖的功能，这意味着当状态更新时它也会更新UI。所以我们的UI随着状态的变化而进步。
## React的优点
使用React的一些原因是：
1. 快速。在React中制作的应用程序可以处理复杂的更新，并且仍然能够做到快速响应。
2. 模块化。您可以编写许多较小的可重用文件，而不是编写大而密集的代码文件。 React的模块化可以解决JavaScript的[可维护性问题](https://en.wikipedia.org/wiki/Spaghetti_code) 。
3. 可扩展性。显示大量不断变化的数据的大型程序是React表现最佳的地方。
4. 灵活。您可以将React用于与制作Web应用程序无关的有趣项目。人们仍然在研究React的潜力。 [有探索的空间](https://medium.mybridge.co/22-amazing-open-source-react-projects-cb8230ec719f) 。
### 虚拟DOM
React的神奇之处在于它对DOM的解释以及它创建UI的策略。
React首先使用Virtual DOM虚拟渲染HTML树，然后，每次状态发生变化时，我们都会得到一个需要被带到浏览器DOM的新HTML树，而不是编写整个新树，React只会编写新树和前一棵树之间的差异（因为React在内存中都有树）。此过程称为树对帐。
### 和解
React有一个智能的差异算法，它只用于在DOM节点中重新生成实际需要重新生成的内容，同时保留其他所有内容。由于React的虚拟DOM，这种差异化过程是可能的。
使用虚拟DOM，React将最后的DOM版本保留在内存中，当它有一个新的DOM版本带到浏览器时，新的DOM版本也将在内存中，因此React可以计算新版本和旧版本之间的差异。
然后，React将指示浏览器仅更新计算两者不同的部分而不是整个DOM节点。无论我们重新生成界面多少次，React都只会向浏览器添加更新的“部分”。
## 开始编写React应用
您是否想开始学习反应的基础知识而不会陷入困境创建开发环境？ 如果您不熟悉Web开发，那么设置开发环境可能会让您在尝试学习React或第一次学习React时感到有点恐惧。
在本文中，我们将介绍如何仅使用文本编辑器和浏览器开始使用React，而不是其他任何内容。
[](http://www.youtube.com/watch?feature=player_embedded&v=100pKUE3OPI)
[### 1 - 用Emmet设置锅炉板代码
让我们开始第1步。我们将从浏览器中的一个名为“index.html”的文件开始。我们将从锅炉板代码HTML代码开始。为了快速入门，我建议使用Emmet和你拥有的任何文本编辑器，并在第一行输入`html:5`然后按shift键获取下面的代码。或者您可以继续复制并粘贴下面的代码。
```javascript
html:5
```
这将产生以下代码：
```javascript
Document
```
我们可以填写“反应时间！”的标题。
此内容不会显示在您的网页中。 HTML文件的head部分中的任何内容都将是我们的浏览器将用户在body部分中解释我们的代码的元数据。此标题将显示在我们页面的选项卡上，而不是实际显示在页面上。
### 2 - 获取脚本标签以利用React和Babel库的强大功能
好的，第一项是从我们的清单中检查出来的。我们来看第二项。我们将使用脚本标记来引入React和Babel来设置我们的开发人员环境。这不是一个真实的开发者环境。那将是一个非常复杂的设置。它还会给我们留下大量的锅炉板代码和库，这些代码和库将使我们不再学习React基础知识。本系列的目标是回顾React的基本语法并直接进入编码。 我们将使用`
...
Time to React!
```
您可以随意使用这些库的更新版本。他们不应该为我们覆盖的内容创建任何重大更改。
我们在这里做什么？ ：HTML `
```
我们正在使用的脚本的“类型”我们将用引号括起来并将其设置为`"text/babel"` 。 当我们使用JSX时，我们需要这种能力立即使用babel。首先，我们将把React呈现给DOM。我们将使用`ReactDOM.render()`方法来执行此操作。这将是一种方法，并且记住方法只是附加到对象的函数。此方法将采用两个参数。
```javascript