React Hooks 实战案例

本文介绍: 在 Re ac t 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 Re ac t 特性；类组件则可以拥有状态和其他 Re a c t 特性，但是需要使用 class 语法来定义。Re a c t Hooks 就是在函数组件中引入了状态和其他 Re a c t 特性的工具。useSt ate：在函数组件中添加状态，相当于在类组件中使用 th i s.state。

文章 目录

一、React Hooks 简介
二、React Hooks 的基本用法
- 1. 使用 `useState` 创建状态
- 2. 使用 `useEffect` 添加副作用
三、React Hooks 的常见问题
- 1. 循环引用问题
- 2. 副作用问题
四、React Hooks 实战案例
好书推荐： React Hooks实战（Web开发与设计）

Re act Hooks 是 React 16.8 版本引入的新特性，它使得在函数组件中也能够使用状态（state）和其他 React 特性。

一、React Hooks 简介

在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。

React Hooks 包括以下四个基本特性：

useState：在函数组件中添加状态，相当于在类组件中使用 thi s.state。
useEffect：在函数组件中添加副作用（side effect），相当于在类组件中使用 this.props.child ren 或者 componentDidMount、componentDidUp date 等生命周期方法。
useCon text：在函数组件中可以使用 React 的 Con text API，而无需使用 class 组件中的 contextProps。
useReduce r：在函数组件中可以使用 Redux 的 reduce r API，用于管理复杂的状态。

除了以上四个基本特性外，React Hooks 还支持自定义 Hooks，使得可以将多个 Hooks 组合在一起，实现更复杂的功能。

二、React Hooks 的基本 用法

1. 使用 `useState` 创建状态

在 React Hooks 中，我们可以使用 useState 创建状态。useState 接受一个初始状态值作为参数，返回一个状态值和更新状态的函数。

例如，我们可以通过以下方式使用 useState 创建状态：

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  return (
    <div&gt;
      <p&gt;You clicked {count} times</p&gt;
      <button onClick={() =&gt; setCount(count + 1)}&gt;
        Click me
      </button&gt;
    </div>
  );
}

在这个例子中，我们通过 useState(0) 创建了一个名为 count 的状态，并初始化为 0。同时，我们还获取了一个名为 setCount 的函数，用于更新 count 的值。在组件中，我们可以使用 count 和 setCount 来管理组件的状态。

2. 使用 `useEffect` 添加副作用

除了状态之外，React Hooks 还提供了 useEffect 来添加副作用。useEffect 接受一个函数作为参数，该函数将在组件渲染时执行。

例如，我们可以通过以下方式使用 useEffect 添加副作用：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

在这个例子中，我们通过 useEffect(() => {}) 添加了一个副作用，该副作用将在组件渲染时执行。在副作用函数中，我们将文档标题设置为点击次数。每次组件渲染时，文档标题也会随之更新。
3. 使用 useContext 获取上下文

React Hooks 还提供了 useContext 来获取上下文。在组件中，我们可以使用 useContext 来访问外部定义的上下文。

例如，我们可以通过以下方式使用 useContext 获取上下文：

import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function Example() {
  const context = useContext(MyContext);
  return (
    <div>
      <p>The value from the context is: {context.value}</p>
    </div>
  );
}

在这个例子中，我们通过 useContext(MyContext) 获取了外部定义的上下文 MyContext。在组件中，我们可以使用 context.value 来访问上下文中定义的值。

三、React Hooks 的常见问题

1. 循环 引用 问题

在使用 React Hooks 时，需要注意循环引用的问题。循环引用是指两个组件相互引用，导致无法正确渲染。为了避免循环引用，我们可以使用 React.lazy 和 Suspense 来按需加载组件。

例如，我们可以使用以下方式使用 React.lazy 和 Suspense 解决循环引用问题：

import React, { Suspense, lazy } from 'react';

const MyLazyComponent = lazy(() => import('./MyLazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyLazyComponent />
      </Suspense>
    </div>
  );
}

在这个例子中，我们使用 React.lazy 和 Suspense 来按需加载 MyLazyComponent。在加载过程中，我们可以在 Suspense 中设置一个回退组件，用于显示加载中的状态。当组件加载完成后，MyLazyComponent 将被渲染出来。

2. 副作用问题

在使用 React Hooks 时，需要注意副作用的问题。如果我们在组件中使用 useEffect 添加副作用，但没有正确处理副作用的清除操作，可能会导致内存泄漏等问题。为了避免这些问题，我们可以使用 useEffect 的第二个参数来指定清理函数。

例如，我们可以使用以下方式使用 useEffect 解决副作用问题：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  });

  return (
    <div>
      <p>You clicked {count} times</p>
    </div>
  );
}

四、React Hooks 实战 案例

下面通过一个简单的实战案例来演示 React Hooks 的基本用法和实际应用。

案例：一个计数器组件，可以增加、减少和重置计数器的值。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [isResetting, setIsResetting] = useState(false);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setIsResetting(true);
    setTimeout(() => {
      setCount(0);
      setIsResetting(false);
    }, 200);
  };

  const handleReset = async () => {
    if (isResetting) {
      return;
    }
    setIsResetting(true);
    await new Promise(resolve => setTimeout(resolve, 200));
    setCount(0);
    setIsResetting(false);
  };

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
}

这段代码定义了一个名为 Counter 的组件，它使用了 React Hooks 中的 useState 来定义组件的状态。在这个例子中，组件具有两个状态：count 和 isResetting。count 用于存储当前计数器的值，isResetting 用于标识是否正在重置计数器。

组件中定义了三个函数：increment、decrement 和 reset，分别用于增加、减少和重置计数器的值。increment 和 decrement 函数通过调用 useState 中的 setCount 函数来更新计数器的值。reset 函数比较复杂，它需要在重置计数器的过程中显示一个加载状态。因此，它首先将 isResetting 设置为 true，表示正在重置计数器。然后，它使用 setTimeout 函数来延迟重置计数器的操作，并在延迟结束后将 count 设置为 0，同时将 isResetting 设置为 false。

在组件的 JSX 中，我们使用三个按钮来触发这三个函数。其中，Reset 按钮需要调用 handleReset 函数，该函数会先检查 isResetting 是否为 true，如果是，则直接返回；否则，它将等待一段时间后重置计数器并关闭加载状态。

这个例子演示了如何使用 React Hooks 来管理组件的状态，以及如何使用函数式编程的方法来处理组件中的副作用（如重置过程中的加载状态）。通过这种方式，我们可以编写更加简洁、易于理解和维护的组件代码。

除了上述的计数器功能，我们还可以扩展这个 Counter 组件，以演示 React Hooks 的更多特性。

1. 使用 useReducer 和 Redux：

我们可以使用 useReducer 钩子来替换上述的 useState，以实现更复杂的状态管理。例如，我们可以将 count 和 isResetting 合并为一个状态对象，并使用一个 reducer 函数来管理这个状态对象。这样，我们可以更方便地进行状态更新和管理。

2. 使用 useContext：

我们可以使用 useContext 钩子来将 React 的 Context API 引入到组件中。例如，我们可以创建一个 CounterContext，用于存储计数器的状态和操作函数。然后，在 Counter 组件中使用 useContext 钩子来获取这个上下文，以获取当前计数器的状态和操作函数。这样，我们可以将计数器的状态和操作函数传递给子组件，让子组件也能够使用它们。

3. 使用自定义 Hooks：

我们可以使用自定义 Hooks 来将多个 Hooks 组合在一起，以实现更复杂的功能。例如，我们可以创建一个名为 useCounter 的自定义 Hook，它将上面的 useState、useReducer 和 useContext 组合在一起，并提供一个简单的 API 来管理计数器的状态和操作函数。这样，我们可以让其他组件更方便地使用计数器的功能。

通过这些扩展，我们可以更全面地了解 React Hooks 的基本用法和实际应用。同时，我们也可以将这些知识和技能应用到实际的开发中，以提高我们的开发效率和代码质量。

4. 添加样式和美化：

为了使计数器更加美观，我们可以添加一些样式和美化效果。例如，我们可以使用外部 CSS 样式表或者内部样式块来设置计数器的背景颜色、文本颜色、边框等样式。我们还可以使用 CSS 动画来添加一些动态效果，例如在计数器数值改变时显示渐变效果。

5. 测试和调试：

为了确保计数器组件的正确性和稳定性，我们需要进行测试和调试。我们可以使用各种测试工具和技术，例如单元测试、集成测试和调试工具等。通过测试和调试，我们可以发现和修复计数器组件中的错误和问题，从而提高组件的质量和可靠性。

总结：

通过以上的扩展，我们可以看到 React Hooks 的强大功能和灵活性。它不仅提供了简洁的状态管理方式，还支持自定义 Hooks、Context API 和 Redux 等高级特性。这些特性使得我们能够编写更加简洁、易于理解和维护的组件代码，并实现更复杂的功能。同时，我们还需要注意测试和调试的重要性，以确保组件的正确性和稳定性。

好书推荐： React Hooks实战（Web 开发与设计）

在这里插入图片描述

使用React Hooks后，你很快就会发现，代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks，可以将组件分成多个函数、管理状态和副作用，并且不必声明类即可调用React内置的功能。而且，上述所有的操作，都不涉及重新调整组件的层级。

《React Hooks实战》将指导你使用hook 开发性能优秀、可复用度高的React组件。首先，你将学习如何使用hook创建组件代码。接下来，你会亲自实现一个资源预订应用程序，这个示例演示了如何管理本地状态、应用程序状态以及类似请求数据之类的副作用。书中的代码示例以及图表可帮助你更加轻松地学习 hook。

内容 简介

主要内容

●构建可调用React功能的函数组件

●管理本地状态、共享状态以及应用程序状态

●学习内置 hook、自定义 hook以及第三方 hook

●利用React Que ry加载、更新和缓存数据

●利用代码分割和React Suspense请求数据并提升页面体验

作者简介

John Larsen从20世纪80年代开始从事编程工作，最开始是在Commodore VIC-20上编写Basic，随后又涉猎了Java、PHP、C#以及JavaScript等领域。他还编写了同样由曼宁出版社出版的Get Program ming with JavaScript一书。他在英国当了25年的数学老师，为高中生讲授计算机知识，并为学校开发与教学类、学习类以及沟通有关的Web 程序。

第Ⅰ部分 React Hooks介绍及应用

第1章 逐渐演进的React 3

1.1 什么是React 3

1.1.1 用组件构建UI 4

1.1.2 同步状态和UI 6

1.1.3 理解组件的类型 9

1.2 React中的新增功能 11

1.3 可以为函数式组件添加状态的React Hooks 12

1.3.1 有状态的函数式组件：更少的代码，更好的组织结构 12

1.3.2 自定义hook：更易于代码复用 14

1.3.3 第三方的hook提供了完备的、经过良好测试的功能 17

1.4 通过Concurrent模式和Suspense获得更好的UX 18

1.4.1 Concurrent模式 19

1.4.2 Suspense 20

1.5 全新的React发布渠道 21

1.6 本书读者对象 21

1.7 开始吧 22

1.8 本章小结 22

第2章 使用useState hook管理组件的状态 23

2.1 搭建预订管理应用程序 24

2.1.1 通过create-react-app生成应用程序的框架 26

2.1.2 编辑四个关键文件 27

2.1.3 为应用程序添加数据库文件 30

2.1.4 创建页面组件和UserPicker.js文件 31

2.2 通过useState存储、使用和设置值 32

2.2.1 给变量赋新值并不会更新UI 33

2.2.2 调用useState返回一个值和一个updater函数 36

2.2.3 调用updater函数替换之前的状态值 40

2.2.4 将函数传递给useState作为初始值 43

2.2.5 设置新状态时需要使用之前的状态 44

2.3 多次调用useState以处理多个状态值 46

2.3.1 使用下拉菜单设置状态 46

2.3.2 使用复选框设置状态 49

2.4 复习函数式组件概念 52

2.5 本章小结 55

第3章 使用useReducer hook管理组件的状态 57

3.1 在响应一个事件时更新多个状态值 58

3.1.1 不可预测的状态变化会将用户带离焦点 58

3.1.2 通过可预测的状态变化让用户沉浸在电影中 59

3.2 通过useReducer管理更复杂的状态 61

3.2.1 使用reducer及一个预定义的action集更新状态 62

3.2.2 为BookablesList组件构建reducer 64

3.2.3 使用useReducer访问组件状态并分派action 67

3.3 通过函数生成初始状态 70

3.3.1 引入WeekPicker组件 71

3.3.2 创建用以处理日期和星期的工具函数 72

3.3.3 构建帮助组件管理日期的reducer 73

3.3.4 向useReducer hook传递初始化函数 74

3.3.5 使用WeekPicker更新BookingsPage 75

3.4 复习useReducer的相关概念 76

3.5 本章小结 79

第4章 处理副作用 81

4.1 通过简单示例探讨useEffect API 82

4.1.1 在每次渲染后运行副作用 82

4.1.2 仅当组件被挂载时运行副作用 84

4.1.3 通过返回一个函数清理副作用 86

4.1.4 通过指定依赖项控制effect的运行时间 88

4.1.5 总结调用useEffect hook的方式 91

4.1.6 在浏览器重绘之前调用useLayoutEffect运行effect 91

4.2 获取数据 92

4.2.1 新建一个db.json文件 92

4.2.2 设置JSON服务器 92

4.2.3 通过useEffect hook获取数据 94

4.2.4 使用async和await 96

4.3 获取BookablesList组件的数据 97

4.3.1 测试数据加载的过程 97

4.3.2 更新reducer以管理加载中状态和错误状态 98

4.3.3 创建一个用于加载数据的辅助函数 100

4.3.4 加载可预订对象 102

4.4 本章小结 103

第5章 使用useRef hook管理组件状态 105

5.1 更新状态但不触发重新渲染 106

5.1.1 对比useState和useRef在更新状态值时的区别 106

5.1.2 调用useRef 108

5.2 在ref中保存计时器ID 109

5.3 保存DOM元素的引用 112

5.3.1 在事件响应中将焦点设置到指定元素上 112

5.3.2 利用ref控制文本框 115

5.4 本章小结 118

第6章 管理应用程序的状态 119

6.1 向子组件传递共享状态 120

6.1.1 通过设置子组件的prop传递父组件的状态 120

6.1.2 从父组件接收状态作为prop 121

6.1.3 从父组件接收updater函数作为prop 123

6.2 拆分组件 125

6.2.1 将组件视为大型应用程序的一部分 125

6.2.2 在一个页面上组织多个组件 126

6.2.3 创建BookableDetails组件 127

6.3 共享useReducer返回的状态和dispatch函数 129

6.3.1 在BookablesView组件中管理状态 130

6.3.2 从reducer中删除一个action 131

6.3.3 在BookablesList组件中接收状态和dispatch函数 131

6.4 共享useState返回的状态和updater函数 134

6.4.1 在BookablesView组件中管理选定的可预订信息 135

6.4.2 在BookablesList中接收可预订信息和updater函数 136

6.5 使用useCallback传递函数以避免重复定义 141

6.5.1 使用prop传入的函数作为依赖项 142

6.5.2 使用useCallback hook维护函数的标识 143

6.6 本章小结 144

第7章 使用useMemo管理性能 147

7.1 厨子不喜欢制作一人份的小蛋糕 148

7.1.1 使用高开销算法生成变位词 149

7.1.2 避免多余的函数调用 151

7.2 通过useMemo记忆化高开销函数 152

7.3 在Bookings页面上组织组件 153

7.3.1 使用useState管理选定的可预订对象 155

7.3.2 使用useReducer和useState管理选定的星期和预订信息 155

7.4 使用useMemo高效创建预订信息网格组件 158

7.4.1 生成时间段和日期的网格 158

7.4.2 生成预订信息的查询对象 161

7.4.3 提供数据加载函数getBookings 163

7.4.4 创建BookingsGrid组件并调用useMemo 164

7.4.5 在useEffect中获取数据时处理多个响应竞争的情况 167

7.5 本章小结 172

第8章 使用Context API管理状态 175

8.1 从上层的组件树中获取状态 176

8.1.1 当页面首次加载时显示一条行为召唤的消息 177

8.1.2 当用户选定预订信息时显示预订信息详情 178

8.1.3 显示一个用于编辑用户预订信息的按钮——问题 179

8.1.4 显示一个用于编辑用户预订信息的按钮——解决方案 180

8.2 使用自定义的provider和多个context 185

8.2.1 将对象用作context provider的值 186

8.2.2 将状态移到自定义provider中 187

8.2.3 使用多个context 191

8.2.4 为context指定一个默认值 195

8.3 本章小结 195

第9章 创建自定义hook 197

9.1 将功能提取到自定义hook中 199

9.1.1 重新组织通用功能 201

9.1.2 在组件外部声明自定义hook 202

9.1.3 在自定义hook中调用自定义hook 203

9.2 遵循hook的规则 205

9.2.1 仅在组件的最顶层调用hook 206

9.2.2 只从React函数式组件中调用hook 206

9.2.3 使用ESLint插件检查hook的规则 206

9.3 更多关于自定义hook的示例 207

9.3.1 使用useWindowSize hook获取窗口尺寸 207

9.3.2 使用useLocalStorage hook获取/设置值 209

9.4 使用自定义hook消费context值 210

9.5 使用自定义hook封装数据请求 213

9.5.1 开发useFetch hook 213

9.5.2 使用useFetch hook返回的data、status和error属性 214

9.5.3 创建专用的数据请求hook：useBookings 216

9.6 本章小结 220

第10章 使用第三方hook 223

10.1 利用React Router访问URL中的状态 224

10.2 获取和设置查询字符串中的查询参数 233

10.3 使用React Query让数据获取过程更流畅 242

10.4 本章小结 254

第Ⅱ部分 揭秘React Concurrent特性

第11章 利用Suspense进行代码分割 259

11.1 利用import函数动态导入代码 260

11.2 利用lazy和Suspense动态导入组件 264

11.3 利用错误边界捕获异常 273

11.4 本章小结 278

第12章 整合数据请求和 Suspense 281

12.1 使用Suspense请求数据 282

12.2 整合React Query、Suspense和错误边界 292

12.3 使用Suspense加载图片 294

12.4 本章小结 299

第13章 实验特性：useTransition、useDeferredValue和SuspenseList 301

13.1 在不同状态间更顺滑地过渡 302

13.2 使用SuspenseList管理多个回退UI 309

13.3 Concurrent模式及未来 313

13.4 本章小结 314