ahooks 深入探究 useRequest 和 useLocalStorageState

利用 ahooks 深入探究 useRequest 和 useLocalStorageState

引言

React Hooks 技术为前端开发带来了革命性的变化。ahooks 库作为一个颇受欢迎的自定义 Hooks 库，提供了许多便利的工具，使得处理状态和副作用变得更加简单和清晰。本文将深入讨论 ahooks 中两个重要的 Hooks —— useRequest 和 useLocalStorageState，并通过详细的示例和最佳实践建议，帮助读者更好地理解如何利用这些 Hooks 构建出优雅而强大的 React 组件。

官方文档：ahooks
下载方式：

$ npm install --save ahooks
#or
$ yarn add ahooks
#or
$ pnpm add ahooks
#or
$ bun add ahooks

特性

• 易学易用
• 支持 SSR
• 对输入输出函数做了特殊处理，且避免闭包问题
• 包含大量提炼自业务的高级 Hooks
• 包含丰富的基础 Hooks
• 使用 TypeScript 构建，提供完整的类型定义文件

历史背景

在介绍 ahooks 之前，先来看一下 React Hooks 的发展历史。自 React 16.8 版本开始，Hooks 成为了 React 的核心特性，它们提供了一种在无需修改组件结构的情况下复用状态逻辑的方式。这就为社区带来了自定义 Hooks 的可能性。ahooks 是由阿里巴巴的前端团队 Ant Design 团队在 2020 年推出的。Ant Design 团队一直以来都致力于提供高质量的 React 组件和工具，以帮助开发者构建优雅的用户界面。ahooks 作为 Ant Design 团队的产物，旨在通过提供各种自定义 Hooks 来简化复杂的业务逻辑和增强开发效率，使得 React 应用程序的开发变得更加容易和高效。这个库得到了社区的积极响应，成为了广大开发者在实际项目中的重要工具之一。ahooks 库便是对这一特性的积极应用，提供了一系列令人惊叹的自定义 Hooks，包括 useRequest 和 useLocalStorageState 等。

useRequest 详解

代码试例

首先，我们来深入了解 useRequest 这个强大的自定义 Hook。useRequest 可以帮助我们更方便地处理数据请求，并且提供了许多参数来定制化请求的行为。通过一个基础的 API 请求示例，我们将学习如何使用 useRequest 来优雅地管理数据请求过程，并处理加载中、错误和成功等不同的状态。

import React from 'react';
import { useRequest } from 'ahooks';

const ExampleComponent = () => {
  // 使用 useRequest 发起数据请求
  const { data, loading, error, run } = useRequest('https://api.example.com/data', {
    manual: true, // 设置 manual 为 true，手动触发请求
    onSuccess: (result) => {
      // 请求成功后的回调
      console.log('Data fetched:', result);
    },
    onError: (err) => {
      // 请求失败时的回调
      console.error('Error fetching data:', err);
    },
  });

  // 手动触发数据请求的函数
  const fetchData = () => {
    run();
  };

  return (
    <div>
      {/* 点击按钮手动触发数据请求 */}
      <button onClick={fetchData} disabled={loading}>
        {loading ? 'Loading...' : 'Fetch Data'}
      </button>
      {/* 根据加载状态和错误状态展示不同内容 */}
      {error && <div>Error: {error}</div>}
      {data && (
        <div>
          <h2>Data</h2>
          {/* 展示获取到的数据 */}
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
};

export default ExampleComponent;

在上面的示例中，我们展示了如何使用 useRequest 来优雅地管理数据请求过程。通过 useRequest 我们可以轻松地处理加载中、错误和成功等不同的状态。首先，在 useRequest 的参数中，我们设置了 manual: true，这意味着我们将手动触发请求。然后，我们定义了 onSuccess 和 onError 回调，用于处理请求成功和失败的情况。接着，在组件中，我们创建了一个按钮来手动触发数据请求，并根据 loading 状态来控制按钮的禁用状态以及显示加载中的文本。最后，根据请求的结果，我们展示了相应的数据或者错误信息。

配置讲解

useRequest 是一个强大的自定义 Hook，它提供了多个配置项来定制化请求的行为。下面我将详细讲解 useRequest 的所有配置项：

• initialData: 用于设置初始数据，在请求之前可以使用这个选项来设置初始值。
• refreshDeps: 当依赖发生变化时，触发重新请求。默认情况下，只有在组件挂载时才会触发一次请求，但是可以通过设置refreshDeps 来指定哪些依赖发生变化时应该触发新请求。
• onSuccess: 请求成功后的回调函数。可以在请求成功时执行自定义逻辑，比如更新 state 或者展示通知。
• onError: 请求失败后的回调函数。可以在请求失败时执行自定义逻辑，比如展示错误信息或者进行错误处理。
• defaultParams: 默认的请求参数。如果你希望每次请求都携带一些固定的参数，可以使用这个选项来设置默认参数。
• paginated: 设置是否为分页请求，默认为 false。当设置为 true 时，useRequest 会返回额外的分页相关状态和方法。
• loadMore: 用于加载更多数据的回调函数。当 paginated 为 true 时，可以使用这个选项来指定加载更多数据的逻辑。
• manual: 是否手动触发请求，默认为 false。当设置为 true 时，请求不会立即发送，需要手动调用 run 方法来触发请求。
• formatResult: 对请求结果进行格式化的函数。可以用于统一处理后端返回的数据格式，比如转换成统一的数据结构。
• throwOnError: 控制是否在请求失败时抛出异常，默认为 false。如果设置为 true，则在请求失败时会抛出异常，可以方便地进行错误处理。
• fetchKey: 用于控制请求的 key，当 fetchKey 发生变化时，会触发新的请求。
• pollingInterval: 轮询间隔时间，用于设置轮询请求的时间间隔。

这些配置项使得 useRequest 可以灵活地满足各种数据请求场景，并且使得整个数据请求过程更加可控和定制化。

useLocalStorageState 详解

接下来，让我们转向另一个常用的自定义 Hook —— useLocalStorageState。这个 Hook 是用于在本地存储中保存状态的，它使得在 React 组件中处理本地存储变得轻而易举。

代码试例

import React from 'react';
import { useLocalStorageState } from 'ahooks';

const ExampleComponent = () => {
  // 使用 useLocalStorageState 来创建一个本地存储的状态
  const [count, setCount] = useLocalStorageState('count', 0);

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

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

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>点击加一</button>
      <button onClick={decrement}>点击减一</button>
    </div>
  );
};

export default ExampleComponent;

在上面的示例中，我们展示了如何使用 useLocalStorageState 自定义 Hook 在本地存储中保存状态。通过调用 useLocalStorageState，我们可以轻松地创建一个与本地存储相关联的状态变量，其中第一个参数是存储的 key，第二个参数是初始值。在这个案例中，我们创建了一个名为 “count” 的本地存储状态，并初始化值为 0。之后，我们提供了增加和减少计数器值的按钮，每次操作都会更新本地存储中的值。

在实际开发中，useLocalStorageState 可以被广泛应用于需要将状态持久化至本地存储的场景。比如记住用户的偏好设置、跟踪用户的浏览历史等。这个 Hook 大大简化了本地存储相关逻辑的处理，使得开发者能够更加专注于业务逻辑而不必过多操心数据的存储与管理。

配置讲解

useLocalStorageState 是一个非常方便的自定义 Hook，它允许您将状态持久化到浏览器的本地存储中。下面是 useLocalStorageState 的所有配置项的详细说明：

• 第一个参数 (key: string): 用于在本地存储中标识数据的键名。这个键名将被用于在本地存储中存储和检索数据。
• 第二个参数 (defaultValue: T | (() => T)): 状态的初始值。可以是任何基本类型或对象类型的数据，甚至可以是通过函数返回的动态初始值。
• 返回值: 返回一个数组，包含了当前的状态值和更新状态的函数。类似于 useState 返回的数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。

除了上述核心的配置项外，useLocalStorageState 还具有其他一些隐式的行为：

1. 当读取本地存储中的值时，会自动尝试将其解析为 JSON格式。
2. 当写入新值时，会将新值转换为 JSON 格式并保存到本地存储中。

这些默认行为使得 useLocalStorageState 变得更加智能，无需开发者手动处理数据的序列化和反序列化。通过使用这个 Hook，可以轻松地将状态持久化到本地存储中，并且在组件挂载后自动从本地存储中恢复先前的状态，为开发者提供了极大的便利性。

最佳实践建议

最后，我们将分享一些最佳实践建议，包括如何在真实项目中合理地使用 ahooks，以及如何充分利用 useRequest 和 useLocalStorageState 这两个 Hooks。我们还将讨论在性能优化和代码质量方面的注意事项，以确保你能够充分发挥这些 Hooks 的优势。

1. 合理使用 Hooks

确保在适当的情况下使用 useRequest 和 useLocalStorageState 等 Hooks，避免滥用或者过度封装。合理地选择与业务逻辑相符的场景以及数据持久化需求。

2. 细粒度控制请求

对于 useRequest，应该根据具体场景进行细粒度的控制，包括设置合适的依赖项、手动触发请求以及优化刷新频率。这样能够更好地管理数据请求，在性能和用户体验上获得平衡。

3. 数据持久化

对于 useLocalStorageState，应该合理选择需要持久化的状态。通常用于保存用户偏好设置、页面状态等与用户相关的数据，但不宜过度使用，避免将大量临时性数据存储在本地而影响性能。

4. 性能优化与监控

在使用这些 Hooks 的过程中，需要关注性能优化和监控。确保数据请求的合理性，避免不必要的重复请求；同时，对本地存储的数据进行合理管理，避免存储大量无用数据。

5. 测试和错误处理

在实际应用中，需要充分考虑测试和错误处理。保证对数据请求和本地存储的状态变化进行充分的单元测试，并针对可能出现的错误情况进行适当的处理和反馈。

6. 文档和团队培训

编写清晰详细的文档，并进行团队内的培训和分享经验。这样能够帮助团队成员更好地理解如何正确、合理地使用这些 Hooks，并从中获得更多的收益。

通过遵循这些最佳实践，开发人员可以更好地利用 useRequest 和 useLocalStorageState 这两个 Hooks，从而提高代码的可维护性、性能和稳定性，为项目的成功和持续发展奠定良好的基础。

总结

在本篇博客中，深入探讨了 ahooks 中的两个重要 Hooks —— useRequest 和 useLocalStorageState。通过详细的介绍和实际示例，希望读者能够更好地理解如何利用这些 Hooks 构建出强大而优雅的 React 组件。同时，强调了最佳实践，并提供了一些建议，帮助更好地在实际项目中应用这些强大的自定义 Hooks。希望在你的下一个 React 项目中，能够充分发挥 ahooks 的优势，打造出更加精妙的用户界面。