---
title: React
localeTitle: 应对
---
# 应对
React是一个用于构建用户界面的JavaScript库。它被Stack Overflow 2017年开发者调查中的“框架,图书馆和其他技术”类别评为最受欢迎。 1
React是一个JavaScript库,构建在它上面的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将指示浏览器仅更新计算的diff而不是整个DOM节点。无论我们重新生成界面多少次,React都会向浏览器添加新的“部分”更新。
## 从Scratch反应
您是否想开始学习反应的基础知识而不会陷入困境创建开发环境? 如果您不熟悉Web开发,那么设置开发环境可能会让您在尝试学习React或第一次学习React时感到有点恐惧。
在本文中,我们将介绍如何仅使用文本编辑器和浏览器开始使用React,而不是其他任何内容。
[![“在这里观看视频”width](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](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 `
React has not rendered yet
React has not rendered yet
React has not rendered yet