1.1 什么是React？

React是Facebook用以开发单页应用（Single Page Applications，SPA）而发布的一款前端框架。那么问题来了，什么是“单页应用”呢？要想理解这个概念，我们要从传统的服务端（Server-side）应用开始。对于Server-side application 服务端应用而言，服务器负责处理业务逻辑、存储数据和网站渲染。当用户在客户端点击了一个链接，它就会向网站服务器发送一个请求，网站在接到请求后会根据预先定义好的业务逻辑返回一个包含HTML的响应，浏览器接收响应然后将其中的HTML渲染出来展示给用户。

这种方式存在一个问题，就是服务器接收并处理了大量的请求。例如，当我们去到一个网站然后点击“首页”，我们就向服务器发送了一个请求然后服务器响应请求返回页面，当我们点击“关于”链接时，就又向服务器发送了一个请求然后服务器又响应这个请求返回页面，如此往复。问题的关键在于，这种方式建立的网站是由离散的网页组成的，当用户在这些网页间跳转时，浏览器要不断发送请求，服务器要不断地相应请求，加载并渲染不同页面的HTML文件。

大量的请求和响应消耗了大量的时间和资源导致网页的加载缓慢，然而移动端和桌面端的应用在大多数时间却能保证流畅的使用体验。React也想将这种流畅性带到浏览器中的网页应用中，那么怎么样才能做到呢？答案就是减少频繁的请求和页面加载。

在“单页应用”中用户仍然可以点击应用中的各种链接来进行页面切换，但是这次处理的逻辑却不一样了，客户端将会接收请求并自己内部处理而不再向Server发送请求，客户端通过JavaScript直接渲染出新HTML页面，而服务器则只负责向客户端提供应用数据。在SPA的模式下，客户端不必总是等待服务器的响应，而服务器也省去了向客户端发送页面的任务。本质上就是将服务器上的页面渲染的任务分给了客户端，两侧达成了平衡实现了效率最大化。当然能做到这点，其实和硬件的进步以及浏览器发展有很大关系，硬件和浏览器的发展使得客户端计算能力提高可以承担更多的任务具有了一定独立性，而不必像以前完全依赖于服务器，实际上SPA仅仅需要服务端的数据。

此外，在SPA中，浏览器加载一个HTML文件之后用户在此页面进行跳转时用户仍会停留在当前的页面上不会像以前一样打开新的标签页窗口，因为SPA通过JavaScript在单一页面完成HTML的卸载和加载从而原地变化浏览器视图。用户虽然感觉上是在不同的页面来回穿梭导航，但实际上仍然是在同一个页面。

1.2 React的特性

高效的DOM操作

加载和卸载同一页面的不同视图涉及查询和操作 DOM 元素。 此类 DOM 操作涉及添加子节点、删除子树，并且可能非常慢。 这就是 React 在有效操作 DOM 元素方面实现突破的地方。 React 通过为我们更新浏览器的DOM 来做到这一点。 使用 React，我们不直接与 DOM 交互。 相反，我们与 React 用来构建实际 DOM 的虚拟 DOM 进行交互。

虚拟 DOM 由 React 元素（在 JSX 中指定——稍后会详细介绍）组成，这些元素看起来类似于 HTML 元素，但实际上是 Javascript对象。 使用 Javascript 对象比直接使用 DOM API 快得多。 我们对 Javascript 对象（虚拟 DOM）进行更改，React 会尽可能高效地为我们呈现这些更改。

https://juejin.cn/post/6844903870229905422

异步操作

当我们需要从/向服务器获取或发送数据时，我们会向服务器发送请求。 但这些主要限于初始加载和必要的服务器端操作，如数据库操作。 除了这些操作，我们不会经常需要向服务器请求。 如果我们确实发出服务器请求，我们会异步执行，这意味着我们仍然会立即将页面重新呈现给用户，然后等待新数据到达并合并它，并在数据到达时仅重新呈现所需的视图 ; 从而提供流畅的体验。

渐进式

在本书中，我将一步一步地从头开始教你如何使用 Hooks 进行 React。 您将构建一个应用程序，您可以在其中输入搜索词并通过 GitHub RESTful api 接收搜索结果。

最后，您还将构建一个具有完整 C.R.U.D. 操作的真实应用程序

这些是您在许多实际应用程序中看到的模式。 在本书中，你将学习如何使用 React Hooks 来实现这些模式。

尽管本书涵盖了使用 React 开发单页 Web 应用程序的技术，但 Web 浏览器并不是 React 应用程序可以运行的唯一地方。 React Native 允许我们使用 React 开发 iOS 和 Android 原生应用。 未来还会出现 React VR，这是一个用于构建提供 360 度体验的交互式虚拟现实应用程序的框架。 我们希望这本书能为你提供一个坚实的基础，让你可以在 React 中构建应用程序，甚至超越 Web 浏览器。

1.3 组件思维

React 应用程序由组件构成。 例如，如果我们想构建一个像我们在网易云上看到的那样的榜单页面模块，我们可以将它分成三个组件。 搜索栏组件、侧边栏组件和歌单组件。

一个React 组件中包含一个 JSX 模板，它最终输出为 HTML 元素。 组件内部有自己的数据和逻辑来控制 JSX 模板。

组件还可以包含其他组件。 例如，在我们显示歌曲榜单列表的侧边栏组件中，我们使用多个榜单组件来做到这一点。

这种架构的好处有助于我们将大型应用程序分解为更小的可管理组件。 另外，我们可以在应用程序中甚至在不同的应用程序中重用以前编写好的组件。 例如，我们可以在不同的应用程序中重用搜索栏组件。

下面是一个显示简单字符串“榜单”的组件示例

import React from 'react' const Products = () => {    return (    <div>      <h2>榜单</h2>    </div>  ) } export default Products

如前所述，我们使用类似于 HTML 的语法（称为 JSX，Javascript XML）来定义我们的 React 组件。 JSX 是 Javascript 的语法扩展。 我们使用 JSX 来构建一个带有 React 元素的虚拟 DOM。 Facebook 发布的JSX 为创建具有属性的复杂 DOM 树提供了一种简洁的语法。 他们希望让 React 像 HTML 和 XML 一样更具可读性。

这是从组件角度思考的宏观方向。 随着您阅读本书的进展，您将看到更多的实际操作。

1.4 开发配置

1）安装 Node

首先，我们需要安装 NodeJS。 NodeJS 是一种服务器端语言，我们不需要它，因为我们没有编写任何服务器端代码。 我们需要它是因为它的 npm（Node Package Manager），一套JS 的包管理系统。 npm 在管理应用程序的依赖项（dependency）方面非常流行。 我们将使用 npm 来安装我们后续需要的其他工具。

从 nodejs.org 获取最新版本的 NodeJS 并将其安装在您的机器上。 安装 NodeJS 的过程非常简单直接。

要检查 Node 是否已正确安装，请在命令行中键入以下命令（Windows 上的命令提示符或 Mac 上的终端）：node -v，您应该会看到显示的Node版本。

2）安装 Create-React-App

create-react-app是开始构建新的 React 单页应用程序的最佳方式。 它自动配置了我们的开发环境，以便我们可以在应用程序中使用最新的 Javascript 功能和优化。 它是一个命令行工具，可以用来创建新的 React 项目、添加文件以及帮助我们更好的完成正在进行的开发任务（如让测试、捆绑和部署更容易）。 它的底层使用了 Babel 和 Webpack 等构建工具，并为开发人员提供了良好的开发体验，一般情况下我们无需对其进行任何手动配置。

要从命令行安装create-react-app，请运行以下命令npm install -g create-react-app

3）编辑器

在本书中，我们将使用 VScode (https://code.visualstudio.com/)，它是Microsoft开发的一款优秀、轻量级和跨平台的编辑器。

4）Chrome 浏览器

在本书中，我们将使用 Chrome 作为我们的浏览器。 您可以使用其他浏览器，但我强烈建议您使用 Chrome，因为我们将在开发中使用 Chrome 开发人员工具，我想确保您在学习中拥有与我们相同的体验。

1.5 使用creact-react-app创建新的开发项目

首先，在终端中导航到要在其中创建 React 项目的文件夹。 接下来，输入下面的命令create-react-app <PROJECT_NAME>。

这将在该目录中创建您的 React 项目文件夹，其中包含三个依赖项：React、ReactDOM 和 react-scripts。 react-scripts 由 Facebook 创建，它内置了 Babel、ESLint、Webpack 等，因此我们不必手动配置它们。创建文件夹后，通过命令导航到该文件夹cd <PROJECT_NAME>，然后命令行键入npm start，start命令将会启动服务器，监视您的文件并在您对这些文件进行更改时重建应用程序。 您还可以运行npm run build命令，该命令会创建一个已被转译和压缩的生产就绪包。

在服务启动完成后，在浏览器中导航到 http://localhost:3000/，您的应用程序会向您显示如下图所示的画面。

其他方式

在 create-react-app 的官方文档（https://reactjs.org/docs/create-a-new-react-app.html）中，展示了另一种创建项目的方式。npx create-react-app <项目名称>

这是创建 React 项目的另一种方法，无需运行 npm install 。 但请注意，npx 是一个命令行工具，仅在 npm 5.2 及更高版本中才开始安装。 如果要使用 npx ，请确保已升级Node到合适版本，然后运行 npx 。 使用 npx 的好处是它会自动使用最新版本的 create-react-app。 除此之外，两种方法之间没有区别。

项目文件说明

现在让我们看看刚刚创建的项目文件。 当你在 VScode 编辑器中打开项目文件夹时，你会发现如下几个文件。

我们不会一一介绍所有文件，因为我们的重点是快速开始我们的第一个 React 应用程序，但我们将简要说明一些比较重要的文件和文件夹。

我们应用程序的主体位于 src 文件夹中。 所有 React 组件、CSS 样式、图像（例如 logo.svg）和我们应用程序需要的其他内容都在这里。 此文件夹之外的任何其他文件都旨在支持构建您的应用程序（应用程序文件夹将占用我们 99% 的工作时间！）。 在本书的学习过程中，您将了解其余库文件和文件夹的用途。

在 src 文件夹中，有一个 index.js 文件，它是我们应用程序的主入口点。 在 index.js 中，我们将 App React 元素渲染到根 DOM 节点中。 完全使用 React 构建的应用程序通常只有一个根 DOM 节点。

index.js

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(  <React.StrictMode>    <App />  </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

在 index.js 中，我们导入了需要在浏览器中使用 React 的 React 和 ReactDOM。 React 是用于创建视图的库。 ReactDOM 是用于在浏览器中呈现 UI 的库。 这两个库在 0.14 版本被拆分为两个包，拆分的目的是允许组件在 Web 版本的 React 和 React Native 之间共享，从而支持各种平台的渲染。

index.js 使用以下几行导入 index.css 、 App组件和 reportWebVitals。

import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals';

然后它使用以下代码渲染App：

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(  <React.StrictMode>    <App />  </React.StrictMode> );

最后一行代码有详细的注释

// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

// 如果你想开始测量你的应用程序的性能，传递一个函数

// 记录结果（例如：reportWebVitals(console.log)）

// 或发送到分析端点。 了解更多：https://bit.ly/CRA-vitals

app.js

在上面代码中，我们有一个名为 App 的基于函数的组件。 每个 React 应用程序至少有一个组件即根组件，在 App.js 中命名为 App。 App 组件通过它返回的 JSX 模板控制视图

return (    <div className="App">      ......    </div> );

（注意：在 JSX 中，任何具有 HTML 类属性的元素都使用该属性的 className 而不是 class 。由于 class 是 Javascript 中的保留字，我们必须使用 className 来定义 HTML 元素的 class 属性。）

一个组件必须返回一个 React 元素。 在我们的例子中，App 返回一个 <div />。 该元素可以是原生 DOM 组件的表示，例如 <div />，也可以时您自己定义的其他复合组件。 我们将在下一章详细介绍这一点。

组件返回的标签语法不是 HTML 而是 JSX。 JSX 是 Javascript 的语法扩展。 我们用它来描述 UI 应该是什么样的。与 HTML 一样，在 JSX 中，元素的类型是用标签指定的。 标签的属性（attribute）展现了特性（property）。 此外，也可以向HTML一样可以在开始标签和结束标签之间添加标签。

组件可以是基于函数（function based）的也可以是基于类（class based）的。在本教程中，我们将重点关注基于函数的组件。 我们在 App 中拥有的是一个基于函数的组件，从它的头函数 App() 可以看出。

接下来，我们还要介绍 package.json 文件和 node_modules 文件夹

package.json

package.json 是Node包的配置文件，其中列出了我们项目使用的第三方包。

node_modules

node_modules 文件夹由 Node.js 创建， package.json 中列出的所有第三方模块都在其中。

1.6 编辑我们的第一个 React 组件

因为我们的 App.js 目前有相当多的样板代码，我们将删除一些内容，从一个更简单的 App.js 开始。 打开 App.js 并将其更改为以下内容：

从上面的函数声明中可以看出，我们创建了一个基于函数的组件。 该函数在单个 React 元素中返回一个 JSX 模板。

通过 React Hooks，我们可以定义应用程序逻辑并通过状态属性和添加其他功能实现与视图交互。 目前，我们的根应用程序组件没有状态属性或其他功能。

当您运行应用程序时，你应该会看到如下内容：

现在，你可以尝试将 App.js 中的“Learn React”更改为“Learn React Hooks”。 请注意，浏览器会自动重新加载修改后的标题。 因为 React 编译器在‘watch’模式下运行，它检测到有工程文件更改就会重新编译代码。 在 Chrome 浏览器中，应用程序会自动刷新，因此您不必在每次代码更改时都必须手动刷新页面。

基于函数的组件 VS 基于类的组件

在 React 中，创建组件的方式主要有两种，我们上面展示的是基于函数的组件，函数组件是我们课程的重点，后面我们还要讲解函数组件可以应用哪些 React 钩子。 另一种类型的组件是类组件。 如果你想使用类组件来学习 React，可以到网上查阅其他资料。

现在，你应该明白函数组件和类组件都是 React 组件。也就是说，一个组件既可以用一个函数来实现，也可以用一个类来实现。

过去，使用类组件给了我们一些优势：它们可以访问组件级别的“状态”，它们提供生命周期事件，例如componentDidMount ， componentDidUpdate 。这些功能在以前使用函数组件来实现非常困难而且不够直观。但是现在通过 React Hooks，基于函数的组件可以实现类组件具有的所有功能。

不仅如此，函数组件还具有其他优势，例如：

• 通过封装逻辑使得代码更简洁

• 改进了跨组件共享逻辑的可重用性

• 更多其他

因此，本课程的目的是让你学习使用 hooks钩子 开发 React 应用程序，这将是 React 开发在未来的重大转变。

小结

在本章中，我们介绍了React 应用程序的核心构建块——组件。我们还介绍了 React 开发工具，通过使用 create-react-app 即可创建一个新的 React 项目。 create-react-app 提供内部编译，它会自动为我们生成我们编写的应用程序，我们可以在浏览器上查看。在下一章中，我们将着手实现一个简单 React 应用程序。