React Hooks 实战案例

文章目录

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

一、React Hooks 简介

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

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

1. useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
2. useEffect：在函数组件中添加副作用（side effect），相当于在类组件中使用 this.props.children 或者 componentDidMount、componentDidUpdate 等生命周期方法。
3. useContext：在函数组件中可以使用 React 的 Context API，而无需使用 class 组件中的 contextProps。
4. useReducer：在函数组件中可以使用 Redux 的 reducer 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>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </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 Query加载、 更新和缓存数据

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

作者简介

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

目录

第Ⅰ部分 React Hooks介绍及应用

第1章 逐渐演进的React 31.1 什么是React 31.1.1 用组件构建UI41.1.2 同步状态和UI61.1.3 理解组件的类型 91.2 React中的新增功能 111.3 可以为函数式组件添加状态的React Hooks 121.3.1 有状态的函数式组件：更少的代码，更好的组织结构 121.3.2 自定义hook：更易于代码复用 141.3.3 第三方的hook提供了完备的、经过良好测试的功能 171.4 通过Concurrent模式和Suspense获得更好的UX181.4.1 Concurrent模式 191.4.2 Suspense 201.5 全新的React发布渠道 211.6 本书读者对象 211.7 开始吧 221.8 本章小结 22

第2章 使用useState hook管理组件的状态 232.1 搭建预订管理应用程序 242.1.1 通过create-react-app生成应用程序的框架 262.1.2 编辑四个关键文件 272.1.3 为应用程序添加数据库文件 302.1.4 创建页面组件和UserPicker.js文件 312.2 通过useState存储、使用和设置值 322.2.1 给变量赋新值并不会更新UI332.2.2 调用useState返回一个值和一个updater函数 362.2.3 调用updater函数替换之前的状态值 402.2.4 将函数传递给useState作为初始值 432.2.5 设置新状态时需要使用之前的状态 442.3 多次调用useState以处理多个状态值 462.3.1 使用下拉菜单设置状态 462.3.2 使用复选框设置状态 492.4 复习函数式组件概念 522.5 本章小结 55

第3章 使用useReducer hook管理组件的状态 573.1 在响应一个事件时更新多个状态值 583.1.1 不可预测的状态变化会将用户带离焦点 583.1.2 通过可预测的状态变化让用户沉浸在电影中 593.2 通过useReducer管理更复杂的状态 613.2.1 使用reducer及一个预定义的action集更新状态 623.2.2 为BookablesList组件构建reducer 643.2.3 使用useReducer访问组件状态并分派action 673.3 通过函数生成初始状态 703.3.1 引入WeekPicker组件 713.3.2 创建用以处理日期和星期的工具函数 723.3.3 构建帮助组件管理日期的reducer 733.3.4 向useReducer hook传递初始化函数 743.3.5 使用WeekPicker更新BookingsPage 753.4 复习useReducer的相关概念 763.5 本章小结 79

第4章 处理副作用 814.1 通过简单示例探讨useEffect API824.1.1 在每次渲染后运行副作用 824.1.2 仅当组件被挂载时运行副作用 844.1.3 通过返回一个函数清理副作用 864.1.4 通过指定依赖项控制effect的运行时间 884.1.5 总结调用useEffect hook的方式 914.1.6 在浏览器重绘之前调用useLayoutEffect运行effect 914.2 获取数据 924.2.1 新建一个db.json文件 924.2.2 设置JSON服务器 924.2.3 通过useEffect hook获取数据 944.2.4 使用async和await964.3 获取BookablesList组件的数据 974.3.1 测试数据加载的过程 974.3.2 更新reducer以管理加载中状态和错误状态 984.3.3 创建一个用于加载数据的辅助函数 1004.3.4 加载可预订对象 1024.4 本章小结 103

第5章 使用useRef hook管理组件状态 1055.1 更新状态但不触发重新渲染 1065.1.1 对比useState和useRef在更新状态值时的区别 1065.1.2 调用useRef 1085.2 在ref中保存计时器ID1095.3 保存DOM元素的引用 1125.3.1 在事件响应中将焦点设置到指定元素上 1125.3.2 利用ref控制文本框 1155.4 本章小结 118

第6章 管理应用程序的状态 1196.1 向子组件传递共享状态 1206.1.1 通过设置子组件的prop传递父组件的状态 1206.1.2 从父组件接收状态作为prop 1216.1.3 从父组件接收updater函数作为prop 1236.2 拆分组件 1256.2.1 将组件视为大型应用程序的一部分 1256.2.2 在一个页面上组织多个组件 1266.2.3 创建BookableDetails组件 1276.3 共享useReducer返回的状态和dispatch函数 1296.3.1 在BookablesView组件中管理状态 1306.3.2 从reducer中删除一个action 1316.3.3 在BookablesList组件中接收状态和dispatch函数 1316.4 共享useState返回的状态和updater函数 1346.4.1 在BookablesView组件中管理选定的可预订信息 1356.4.2 在BookablesList中接收可预订信息和updater函数 1366.5 使用useCallback传递函数以避免重复定义 1416.5.1 使用prop传入的函数作为依赖项 1426.5.2 使用useCallback hook维护函数的标识 1436.6 本章小结 144

第7章 使用useMemo管理性能 1477.1 厨子不喜欢制作一人份的小蛋糕 1487.1.1 使用高开销算法生成变位词 1497.1.2 避免多余的函数调用 1517.2 通过useMemo记忆化高开销函数 1527.3 在Bookings页面上组织组件 1537.3.1 使用useState管理选定的可预订对象 1557.3.2 使用useReducer和useState管理选定的星期和预订信息 1557.4 使用useMemo高效创建预订信息网格组件 1587.4.1 生成时间段和日期的网格 1587.4.2 生成预订信息的查询对象 1617.4.3 提供数据加载函数getBookings 1637.4.4 创建BookingsGrid组件并调用useMemo 1647.4.5 在useEffect中获取数据时处理多个响应竞争的情况 1677.5 本章小结 172

第8章 使用Context API管理状态 1758.1 从上层的组件树中获取状态 1768.1.1 当页面首次加载时显示一条行为召唤的消息 1778.1.2 当用户选定预订信息时显示预订信息详情 1788.1.3 显示一个用于编辑用户预订信息的按钮——问题 1798.1.4 显示一个用于编辑用户预订信息的按钮——解决方案 1808.2 使用自定义的provider和多个context 1858.2.1 将对象用作context provider的值 1868.2.2 将状态移到自定义provider中 1878.2.3 使用多个context 1918.2.4 为context指定一个默认值 1958.3 本章小结 195

第9章 创建自定义hook 1979.1 将功能提取到自定义hook中 1999.1.1 重新组织通用功能 2019.1.2 在组件外部声明自定义hook 2029.1.3 在自定义hook中调用自定义hook 2039.2 遵循hook的规则 2059.2.1 仅在组件的最顶层调用hook 2069.2.2 只从React函数式组件中调用hook 2069.2.3 使用ESLint插件检查hook的规则 2069.3 更多关于自定义hook的示例 2079.3.1 使用useWindowSize hook获取窗口尺寸 2079.3.2 使用useLocalStorage hook获取/设置值 2099.4 使用自定义hook消费context值 2109.5 使用自定义hook封装数据请求 2139.5.1 开发useFetch hook 2139.5.2 使用useFetch hook返回的data、status和error属性 2149.5.3 创建专用的数据请求hook：useBookings 2169.6 本章小结 220

第10章 使用第三方hook 22310.1 利用React Router访问URL中的状态 22410.2 获取和设置查询字符串中的查询参数 23310.3 使用React Query让数据获取过程更流畅 24210.4 本章小结 254

第Ⅱ部分 揭秘React Concurrent特性

第11章 利用Suspense进行代码分割 25911.1 利用import函数动态导入代码 26011.2 利用lazy和Suspense动态导入组件 26411.3 利用错误边界捕获异常 27311.4 本章小结 278

第12章 整合数据请求和 Suspense 28112.1 使用Suspense请求数据 28212.2 整合React Query、Suspense和错误边界 29212.3 使用Suspense加载图片 29412.4 本章小结 299

第13章 实验特性：useTransition、useDeferredValue和SuspenseList 30113.1 在不同状态间更顺滑地过渡 30213.2 使用SuspenseList管理多个回退UI30913.3 Concurrent模式及未来 31313.4 本章小结 314