【React】详解自定义 Hook

在 React 中，Hooks 使我们能够在函数组件中使用状态和其他 React 特性。自定义 Hook 是一种复用逻辑的方式，它允许我们将组件逻辑提取到可重用的函数中。本文将深入探讨自定义 Hook 的概念，包括其基本用法、进阶应用和实际案例。通过本文，你将全面了解如何创建和使用自定义 Hook，并在实际编程中灵活应用。

一、自定义 Hook 的基本用法

1. 什么是自定义 Hook？

自定义 Hook 是一个以 use 开头的 JavaScript 函数，它可以调用其他 Hook，并将逻辑封装在函数中供组件使用。通过自定义 Hook，可以轻松复用状态逻辑。

2. 创建自定义 Hook

自定义 Hook 的创建非常简单，只需编写一个函数，函数名以 use 开头，并在函数内部调用其他 Hook。

示例：创建一个计数器 Hook

import { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return { count, increment, decrement };
}

3. 使用自定义 Hook

创建好自定义 Hook 后，可以在组件中像使用内置 Hook 一样使用它。

示例：使用自定义的计数器 Hook

import React from 'react';
import useCounter from './useCounter';

function CounterComponent() {
  const { count, increment, decrement } = useCounter(10);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
      <button onClick={decrement}>Decrease</button>
    </div>
  );
}

export default CounterComponent;

二、自定义 Hook 的进阶应用

1. 处理副作用

自定义 Hook 可以处理副作用，例如数据获取、订阅和定时器等。使用 useEffect 可以将这些副作用逻辑封装在自定义 Hook 中。

示例：数据获取 Hook

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });

    return () => {
      // 清除逻辑
    };
  }, [url]);

  return { data, loading };
}

2. 组合多个 Hook

自定义 Hook 可以组合多个内置 Hook 来实现复杂的逻辑。例如，结合 useState 和 useEffect 实现一个带有计时功能的计数器。

示例：带有计时功能的计数器 Hook

import { useState, useEffect } from 'react';

function useTimedCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let timer;
    if (isRunning) {
      timer = setInterval(() => {
        setCount(prevCount => prevCount + 1);
      }, 1000);
    }

    return () => {
      clearInterval(timer);
    };
  }, [isRunning]);

  const start = () => setIsRunning(true);
  const stop = () => setIsRunning(false);

  return { count, start, stop, isRunning };
}

3. 参数化 Hook

自定义 Hook 可以接受参数，使其更加灵活和可重用。例如，一个可重用的表单输入 Hook。

示例：表单输入 Hook

import { useState } from 'react';

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
}

4. 条件逻辑

自定义 Hook 可以包含条件逻辑，根据条件执行不同的操作。

示例：带有条件逻辑的 Hook

import { useState, useEffect } from 'react';

function useConditionalFetch(url, shouldFetch) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (shouldFetch) {
      setLoading(true);
      fetch(url)
        .then(response => response.json())
        .then(data => {
          setData(data);
          setLoading(false);
        });
    }
  }, [url, shouldFetch]);

  return { data, loading };
}

三、自定义 Hook 的实际应用案例

1. 实现用户身份验证

在应用中，用户身份验证是一个常见需求。通过自定义 Hook，可以将身份验证逻辑封装并在多个组件中复用。

示例：用户身份验证 Hook

import { useState, useEffect } from 'react';

function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟异步验证过程
    setTimeout(() => {
      const loggedInUser = { name: 'John Doe' }; // 模拟登录用户数据
      setUser(loggedInUser);
      setLoading(false);
    }, 1000);

    return () => {
      // 清除逻辑
    };
  }, []);

  const logout = () => {
    setUser(null);
  };

  return { user, loading, logout };
}

使用示例：用户身份验证组件

import React from 'react';
import useAuth from './useAuth';

function AuthComponent() {
  const { user, loading, logout } = useAuth();

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.name}!</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

export default AuthComponent;

2. 实现媒体查询

在响应式设计中，媒体查询是一个常见需求。通过自定义 Hook，可以将媒体查询逻辑封装并在多个组件中复用。

示例：媒体查询 Hook

import { useState, useEffect } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    const documentChangeHandler = () => setMatches(mediaQueryList.matches);

    mediaQueryList.addEventListener('change', documentChangeHandler);

    // 初始检查
    setMatches(mediaQueryList.matches);

    return () => {
      mediaQueryList.removeEventListener('change', documentChangeHandler);
    };
  }, [query]);

  return matches;
}

使用示例：响应式组件

import React from 'react';
import useMediaQuery from './useMediaQuery';

function ResponsiveComponent() {
  const isSmallScreen = useMediaQuery('(max-width: 600px)');

  return (
    <div>
      {isSmallScreen ? (
        <p>小屏幕设备</p>
      ) : (
        <p>大屏幕设备</p>
      )}
    </div>
  );
}

export default ResponsiveComponent;

四、最佳实践和注意事项

1. 以 use 开头命名

所有自定义 Hook 都应以 use 开头，以便遵循 Hook 的命名约定，并且能够被 React 正确识别和处理。

2. 不要在条件语句中调用 Hook

与内置 Hook 一样，自定义 Hook 不应在条件语句中调用。确保 Hook 的调用顺序在每次渲染时保持一致。

3. 复用逻辑

自定义 Hook 的主要目的是复用逻辑。将复杂的状态逻辑和副作用封装在自定义 Hook 中，可以使组件更加简洁和易于维护。

4. 返回必要的数据和函数

自定义 Hook 应该返回必要的数据和函数，而不是直接在 Hook 内部处理所有逻辑。这样可以保持灵活性，使调用者能够根据需要处理返回的数据和函数。

---