18、自定义 React Hooks 开发指南

自定义 React Hooks 开发指南

在 React 开发中，自定义 Hooks 是一种强大的工具，它可以帮助我们复用逻辑、提高代码的可读性和可维护性。本文将详细介绍如何创建和使用自定义 Hooks，包括用户状态管理、API 调用和防抖历史状态管理等方面，并提供相应的测试方法。

1. 创建用户状态管理 Hook

首先，我们来创建一个用于管理用户状态的自定义 Hook。这个 Hook 将封装用户登录、注册和注销的逻辑，并提供一个标志来判断用户是否已登录。

// 定义一个函数来创建用户状态管理 Hook
function useUser() {
  // 从本地存储中获取用户名
  const [username, setUsername] = useLocalStorage('username', 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 };