18、自定义 Hook 构建与应用

自定义 Hook 构建与应用

在开发中，自定义 Hook 能够帮助我们将复杂的逻辑抽象出来，提高代码的复用性和可维护性。下面将详细介绍如何创建和使用自定义 Hook。

自定义用户 Hook

我们首先创建一个自定义的用户 Hook，用于管理用户的登录状态。以下是创建和使用该 Hook 的步骤：

1. 创建用户 Hook

   • 定义一个函数 useUser ，在其中完成用户状态的管理。
     ```javascript
     import { useState } from ‘react’;

   export function useUser() {
   const [username, setUsername] = useState(null);
   const isLoggedIn = username !== null;

   function register(username) {
   setUsername(username);
   }

   function login(username) {
   setUsername(username);
   }

   function logout() {
   setUsername(null);
   }

   return { username, isLoggedIn, register, login, logout };
   }
   ```
   - 这里返回了一个对象，包含了用户名、登录状态标志以及注册、登录和注销的函数。

2. 使用用户 Hook

   • 对博客应用进行重构，使用 useUser 替换直接对本地存储 Hook 的读写操作。
   • 修改 src/App.jsx
     • 移除 import { useLocalStorage } from '@uidotdev/usehooks' 。
     • 替换为 import { useUser } from './hooks/user.js' 。
     • 使用自定义 Hook：
       javascript export function App() { const { isLoggedIn } = useUser(); return ( <div> {isLoggedIn && <CreatePost />} </div> ); }
   • 修改其他组件 ：按照类似的步骤，对 UserBar.jsx 、 Register.jsx 、 Login.jsx 、 Logout.jsx 、 CreatePost.jsx 、 CreateComment.jsx 和 CommentList.jsx 进行修改，将本地存储 Hook 替换为 useUser 。

通过使用自定义用户 Hook，代码变得更易读，并且可以方便地调整用户登录状态的检查逻辑。

自定义 API Hook

我们还可以为各种 API 调用创建自定义 Hook，将这些 Hook 放在一个文件中，便于后续调整 API 调用。以下是创建和使用自定义 API Hook 的步骤：

1. 提取自定义 API Hook

   • 复制文件夹并创建新的 src/hooks/api.js 文件。
   • 编辑 src/hooks/api.js ，导入所需的函数：
     javascript import { useSuspenseQuery, useMutation } from '@tanstack/react-query'; import { fetchPosts, fetchPost, searchPosts, createPost, queryClient, } from '@/api.js';
   • 定义各种 API Hook：
     • 获取文章列表
       javascript export function useAPIFetchPosts({ featured }) { const { data } = useSuspenseQuery({ queryKey: ['posts', featured], queryFn: async () => await fetchPosts({ featured }), }); return data; }
     • 获取单篇文章
       javascript export function useAPIFetchPost({ id }) { const { data } = useSuspenseQuery({ queryKey: ['post', id], queryFn: async () => await fetchPost({ id }), }); return data; }
     • 搜索文章
       javascript export function useAPISearchPosts({ query }) { const { data } = useSuspenseQuery({ queryKey: ['posts', query], queryFn: async () => await searchPosts(query), }); return data; }
     • 创建文章
       javascript export function useAPICreatePost() { const createPostMutation = useMutation({ mutationFn: createPost, onSuccess: () => { queryClient.invalidateQueries(['posts']); }, }); return createPostMutation.mutateAsync; }

2. 使用自定义 API Hook

   • 对博客应用进行重构，使用自定义 API Hook 替换原有的 API 调用。
   • 修改 PostFeed.jsx
     • 移除 import { useSuspenseQuery } from '@tanstack/react-query' 和 import { fetchPosts } from '@/api.js' 。
     • 替换为 import { useAPIFetchPosts } from '@/hooks/api.js' 。
     • 使用自定义 Hook：
       javascript export function PostFeed({ featured = false }) { const posts = useAPIFetchPosts({ featured }); return <PostList posts={posts} />; }
   • 修改其他组件 ：按照类似的步骤，对 Post.jsx 、 PostSearchResults.jsx 和 CreatePost.jsx 进行修改，将原有的 API 调用替换为自定义 API Hook。

通过使用自定义 API Hook，组件的代码变得更简洁，关注点更加分离，便于后续的维护和扩展。

自定义防抖历史状态 Hook

接下来，我们创建一个稍微复杂一些的自定义 Hook，用于实现防抖历史状态功能。

1. 创建防抖历史状态 Hook

   • 复制文件夹并创建新的 src/hooks/debouncedHistoryState.js 文件。
   • 编辑文件，导入所需的函数：
     javascript import { useState, useEffect } from 'react'; import { useDebouncedCallback } from 'use-debounce'; import { useHistoryState } from '@uidotdev/usehooks';
   • 定义防抖历史状态 Hook：
     ```javascript
     export function useDebouncedHistoryState(initialState, timeout) {
     const { state, set, undo, redo, clear, canUndo, canRedo } = useHistoryState(initialState);
     const [content, setContent] = useState(initialState);
     const debounced = useDebouncedCallback((value) => set(value), timeout);

   useEffect(() => {
   debounced.cancel();
   setContent(state);
   }, [state, debounced]);

   function handleContentChange(e) {
   const { value } = e.target;
   setContent(value);
   debounced(value);
   }

   return { content, handleContentChange, undo, redo, clear, canUndo, canRedo };
   }
   ```

2. 使用防抖历史状态 Hook

   • 修改 CreatePost.jsx ，使用自定义防抖历史状态 Hook。
   • 移除原有的相关导入和代码。
   • 添加 import { useDebouncedHistoryState } from '@/hooks/debouncedHistoryState.js' 。
   • 使用自定义 Hook：
     javascript export function CreatePost() { const { content, handleContentChange, undo, redo, clear, canUndo, canRedo } = useDebouncedHistoryState('', 200); return ( <div> <textarea value={content} onChange={handleContentChange} /> <button onClick={undo}>撤销</button> <button onClick={redo}>重做</button> <button onClick={clear}>清除</button> </div> ); }

通过使用自定义防抖历史状态 Hook， CreatePost 组件的代码变得更加简洁，逻辑更加清晰。

测试自定义 Hook

为了确保自定义 Hook 的正确性，我们需要编写单元测试。这里我们使用 Vitest 进行测试，同时结合 React Testing Library 来直接测试 Hook。

1. 设置 Vitest 和 React Testing Library

   • 复制文件夹并安装所需的依赖：
     bash $ npm install --save-exact --save-dev vitest@3.0.5 @testing-library/react@16.2.0 jsdom@26.0.0
   • 编辑 package.json ，添加测试脚本：
     json { "scripts": { "test": "vitest" } }
   • 编辑 vite.config.js ，添加 Vitest 配置：
     javascript export default defineConfig({ // 其他配置... test: { environment: 'jsdom', }, });

2. 测试简单 Hook

   • 创建一个简单的计数器 Hook useCounter ：
     ```javascript
     import { useState } from ‘react’;

   export function useCounter(initialCount = 0) {
   const [count, setCount] = useState(initialCount);

   function increment() {
   setCount(count + 1);
   }

   function reset() {
   setCount(initialCount);
   }

   return { count, increment, reset };
   }
   `` - 编写测试用例对 useCounter` 进行测试。

通过以上步骤，我们可以创建、使用和测试自定义 Hook，提高代码的质量和可维护性。

总结

自定义 Hook 是 React 开发中非常强大的工具，它可以帮助我们将复杂的逻辑封装起来，提高代码的复用性和可维护性。通过创建自定义用户 Hook、API Hook 和防抖历史状态 Hook，并对其进行测试，我们可以更好地管理应用的状态和逻辑。在实际开发中，合理使用自定义 Hook 可以让我们的代码更加简洁、易读，同时也便于后续的扩展和维护。

流程图：创建自定义 Hook 流程

graph TD;
    A[开始] --> B[创建用户 Hook];
    B --> C[使用用户 Hook 重构应用];
    C --> D[创建 API Hook];
    D --> E[使用 API Hook 重构应用];
    E --> F[创建防抖历史状态 Hook];
    F --> G[使用防抖历史状态 Hook 重构组件];
    G --> H[设置测试环境];
    H --> I[测试自定义 Hook];
    I --> J[结束];

表格：自定义 Hook 总结

自定义 Hook 名称	功能	使用场景
useUser	管理用户登录状态	用户注册、登录、注销
useAPIFetchPosts	获取文章列表	文章列表展示
useAPIFetchPost	获取单篇文章	文章详情展示
useAPISearchPosts	搜索文章	文章搜索功能
useAPICreatePost	创建文章	文章创建功能
useDebouncedHistoryState	实现防抖历史状态功能	文本编辑的撤销、重做
useCounter	简单计数器	计数相关功能

自定义 Hook 构建与应用（续）

自定义 Hook 的优势分析

自定义 Hook 带来了诸多优势，下面我们通过表格形式详细分析：
| 优势 | 具体说明 |
| ---- | ---- |
| 代码复用性 | 可以将通用的逻辑封装在 Hook 中，在多个组件中复用。例如 useUser 可以在多个与用户相关的组件中使用，避免代码重复。 |
| 可维护性 | 复杂的逻辑被抽象到 Hook 内部，组件只需要关注自身的交互逻辑。如使用自定义 API Hook 后，组件代码更简洁，修改 API 调用逻辑只需在 Hook 中进行。 |
| 逻辑分离 | 不同的功能逻辑被封装在不同的 Hook 中，使代码结构更清晰。比如用户状态管理、API 调用、防抖历史状态功能分别由不同的 Hook 实现。 |
| 代码可读性 | 调用具有明确语义的 Hook 函数和变量，使代码更易理解。例如使用 isLoggedIn 标志判断用户是否登录，比直接检查用户名更直观。 |

自定义 Hook 的注意事项

在使用自定义 Hook 时，也有一些需要注意的地方：
1. Hook 调用规则 ：必须在 React 函数组件或其他 Hook 内部调用 Hook，不能在普通 JavaScript 函数中调用。
2. 命名规范 ：自定义 Hook 通常以 use 开头，这样可以方便识别和遵循 React 的约定。
3. 状态管理 ：要注意 Hook 内部状态的管理，避免出现状态不一致的问题。例如在 useDebouncedHistoryState 中，需要通过 useEffect 同步历史状态和当前编辑内容。
4. 依赖管理 ：在使用 useEffect 等 Hook 时，要正确处理依赖项，避免出现无限循环或副作用不生效的情况。

自定义 Hook 的扩展与优化

我们可以对现有的自定义 Hook 进行扩展和优化，以满足更多的需求。

1. useUser Hook 扩展
   • 可以添加更多的用户信息管理功能，如存储用户头像、邮箱等。
   • 实现完整的身份验证逻辑，如与后端服务器进行验证。

以下是扩展后的 useUser 示例：

import { useState } from 'react';

export function useUser() {
  const [username, setUsername] = useState(null);
  const [avatar, setAvatar] = useState(null);
  const [email, setEmail] = useState(null);
  const isLoggedIn = username !== null;

  function register(username, avatar, email) {
    setUsername(username);
    setAvatar(avatar);
    setEmail(email);
  }

  function login(username, avatar, email) {
    setUsername(username);
    setAvatar(avatar);
    setEmail(email);
  }

  function logout() {
    setUsername(null);
    setAvatar(null);
    setEmail(null);
  }

  return { username, avatar, email, isLoggedIn, register, login, logout };
}

2. API Hook 优化
   • 可以添加缓存机制，减少不必要的 API 调用。
   • 处理 API 错误，提供更友好的错误提示。

以下是优化后的 useAPIFetchPosts 示例：

import { useSuspenseQuery } from '@tanstack/react-query';
import { fetchPosts } from '@/api.js';

export function useAPIFetchPosts({ featured }) {
  const { data, error } = useSuspenseQuery({
    queryKey: ['posts', featured],
    queryFn: async () => await fetchPosts({ featured }),
    staleTime: 1000 * 60 * 5, // 缓存 5 分钟
    onError: (err) => {
      console.error('获取文章列表失败:', err);
    },
  });

  if (error) {
    return { error: '获取文章列表失败，请稍后重试' };
  }

  return data;
}

自定义 Hook 的未来趋势

随着 React 生态的不断发展，自定义 Hook 也会有更多的应用场景和发展趋势：
1. 与新特性结合 ：例如与 React 的并发模式、Suspense 等新特性结合，实现更高效的渲染和数据获取。
2. 跨框架应用 ：虽然目前主要在 React 中使用，但未来可能会有更多跨框架的自定义 Hook 出现，实现代码在不同框架间的复用。
3. 自动化测试工具 ：会有更多专门针对自定义 Hook 的自动化测试工具出现，提高测试效率和准确性。

流程图：自定义 Hook 扩展与优化流程

graph TD;
    A[选择自定义 Hook] --> B[分析需求];
    B --> C{是否需要扩展功能};
    C -- 是 --> D[添加新功能逻辑];
    C -- 否 --> E{是否需要优化性能};
    D --> E;
    E -- 是 --> F[优化代码逻辑];
    E -- 否 --> G[完成];
    F --> G;

总结

自定义 Hook 为 React 开发带来了巨大的便利和提升。通过详细了解自定义 Hook 的创建、使用、测试以及扩展优化等方面，我们可以更好地利用这一强大工具。在实际开发中，要充分发挥自定义 Hook 的优势，同时注意其使用规则和注意事项。随着技术的不断发展，自定义 Hook 也将不断演变和完善，为开发者提供更多的可能性。希望大家在开发过程中能够灵活运用自定义 Hook，打造出高质量、易维护的 React 应用。