ReactJS 快速入门

引言

本文档的目的是帮助想要学习和开始使用ReactJS的人。它试图涵盖ReactJS的基础知识和元素，以及如何在Web应用程序和移动应用程序开发中实现它们，并解释为什么我们应该使用React。

什么是ReactJS

• ReactJS是由Facebook创建的一个JavaScript库。
• ReactJS用于处理Web和移动应用程序的视图层。
• ReactJS是一个高效且灵活的JavaScript库，用于构建用户界面。
• ReactJS允许我们创建可重用的用户界面（UI）组件，即UI库。

为什么使用ReactJS

组件使React具有高度可重用性

一个普通的网页有很多组件，例如可以有一个头部、一个侧边栏和一个主区域，其中可以包含列表和几个列表项、网格等。ReactJS将这个概念分解为组件，并允许我们构建可以在整个网页中使用的可重用组件，这些组件不仅包含HTML代码，还包含JS逻辑，允许您监听用户操作以动态显示内容，并在需要时更新UI，而无需访问服务器并获取新视图。

虚拟DOM

虚拟DOM是一个编程概念，其中UI的理想或“虚拟”表示保存在内存中。每次React应用中的底层数据发生变化时，都会创建一个用户界面的新虚拟DOM表示。在React中更新浏览器的DOM是一个三步过程。

• 一旦任何内容可能发生变化，整个UI将在虚拟DOM表示中重新渲染。
• 将计算之前虚拟DOM表示与新虚拟DOM表示之间的差异。
• 真实DOM将使用实际发生变化的内容进行更新。

学习曲线短

React具有相对较小的API，因此对于大多数有经验的开发人员来说，上手并开始工作只需要几周到几个月的时间。

React可用于移动应用和VR

使用React Native项目，React API可以移植到移动开发。我们还可以使用相同的架构来设计React的虚拟现实应用程序。

必备组件

在开始之前，我们应该对以下内容有基本的了解：

• HTML
• CSS
• HTML DOM
• Node.js
• npm

创建React应用的步骤

要创建React应用，我们需要运行以下命令：

**我们使用npx而不是npm，因为它将创建一个名为“react-training-app”的React应用，并包含所有依赖库。

ReactJS – JSX类型

React组件将返回JavaScript代码来创建UI，React推荐使用JSX来创建UI，尽管我们也可以使用带有HTML的JavaScript来创建UI。

• JSX是JavaScript的语法扩展。
• 组件通常用JSX编写。
• 它通过返回HTML来帮助创建虚拟DOM。
• 它更快，因为它在将代码编译为JavaScript时执行优化。
• 它也是类型安全的，并且大多数错误可以在编译期间捕获。

ReactJS – 组件

React组件就像JavaScript函数，它们将UI分解成独立、可重用的部分。它返回描述屏幕上应显示内容的React元素。

我们在以下示例中的第一个组件是App。它只返回文本“Hello React!”。

下面的代码展示了如何在组件内调用组件。

ReactJS - 组件生命周期方法

生命周期方法是在组件生命周期的不同阶段被调用的各种方法。我们可以根据组件的初始化、更新和销毁将这些方法分为三类。它们是：

• 挂载方法（初始化）
• 更新方法（更新）
• 卸载方法（销毁）

以下是将在不同阶段调用的组件生命周期方法：

• componentWillMount 在服务器和客户端上渲染之前执行。
• componentDidMount 在第一次渲染后仅在客户端执行。
• componentWillReceiveProps 在另一个渲染被调用之前，一旦props更新就会被调用。
• shouldComponentUpdate 应返回true或false，这决定了组件是否将被更新。
• componentWillUpdate 在渲染之前被调用。
• componentDidUpdate 在渲染之后被调用。
• componentWillUnmount 在组件从DOM中卸载后被调用。

ReactJS – State

State是数据来源的地方。组件的State是一个对象，它包含一些在其生命周期中可能发生变化的信息。基本上，它是一个可观察属性集的对象，用于控制组件的行为。

下面的代码演示了State的一个简单用法，当单击一个按钮时，我们增加数字（即count变量），并在一个div中显示它。

ReactJS - Props

Props也用于在组件中存储数据，但Props是不可变的。当我们需要在组件中使用不可变数据时，我们使用props。

下面的代码演示了Props的一个简单用法。

我们已经了解了State和Props，并知道Props和State都是用于存储信息以控制特定组件行为的对象，但props和states却并非完全相同。让我们区分一下两者：

• Props是不可变的，即一旦设置，props就不能被更改，而State是一个可观察对象，用于存储可能随时间变化的数据，并控制每次更改后的行为。
• States只能在类Components中使用，而Props没有这个限制。

结论

我希望通过本文的示例，我已经涵盖了ReactJS的重要概念，这将帮助您快速开始ReactJS开发。

历史

• 2019年3月5日 - 首次上传