okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

自定义 Hooks

2024/9/21

自定义 Hooks 是 React 中提高代码复用性的重要工具。它们允许我们将逻辑抽离并封装成独立的 Hook，使不同组件可以共享相同的状态逻辑和副作用，从而避免代码重复。通过自定义 Hooks，可以将复杂的逻辑封装在函数中，提升代码的可维护性和简洁性。

在以下内容中，我们将介绍：

  1. 自定义 Hooks 的定义与使用
  2. 通过自定义 Hooks 提高代码复用性
  3. 第三方库封装自定义 Hooks

1. 自定义 Hooks 的定义与使用

1.1 什么是自定义 Hooks？

自定义 Hooks 是可以复用的状态逻辑，它是一个普通的 JavaScript 函数，名字必须以 use 开头（这是 React 约定的命名规则）。自定义 Hooks 可以调用其他 Hooks，并且可以像其他 React Hooks 一样返回状态和行为。

1.2 如何定义自定义 Hooks

自定义 Hook 和普通函数的最大区别在于它内部会使用 React 的内置 Hooks（如 useState, useEffect 等）。

示例：使用自定义 Hook 获取窗口尺寸

jsx
import { useState, useEffect } from 'react';

// 自定义 Hook: useWindowSize
function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    // 定义处理窗口尺寸变化的函数
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // 添加窗口 resize 事件监听器
    window.addEventListener('resize', handleResize);

    // 清理函数，移除事件监听器
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return windowSize;
}

export default useWindowSize;

1.3 使用自定义 Hook

在组件中使用自定义 Hooks 和使用 React 内置 Hooks 是一样的。

jsx
import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      <p>Window width: {width}</p>
      <p>Window height: {height}</p>
    </div>
  );
}

export default MyComponent;

在这个例子中，useWindowSize 自定义 Hook 提供了窗口的宽度和高度，任何组件都可以使用该 Hook 以便实时响应窗口大小的变化。

2. 通过自定义 Hooks 提高代码复用性

在实际开发中，不同组件中常常会有一些重复的逻辑（如 API 请求、表单处理、计时器等），自定义 Hooks 可以将这些逻辑提取出来，实现代码复用。

示例：自定义 Hook 处理 API 请求

jsx
import { useState, useEffect } from 'react';

// 自定义 Hook: useFetch
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

使用 useFetch 自定义 Hook 进行数据请求

jsx
import React from 'react';
import useFetch from './useFetch';

function DataDisplay() {
  const { data, loading, error } = useFetch('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataDisplay;
  • 自定义 Hook useFetch：将 API 请求和错误处理的逻辑抽离出来，可以在任何需要请求数据的组件中复用这一逻辑。
  • 代码复用性：所有需要请求 API 数据的组件都可以直接使用 useFetch，不需要重复编写请求逻辑，且保持了逻辑的一致性。

3. 封装第三方库的自定义 Hooks

很多时候我们使用第三方库进行一些复杂的操作，比如状态管理库、动画库、或者表单库。为了更好地集成这些第三方库，我们可以封装它们的逻辑到自定义 Hooks 中。

示例：封装 localStorage 操作的自定义 Hook

浏览器的 localStorage 是一个常用的 API，用于持久化数据。我们可以将其操作封装成一个自定义 Hook。

jsx
import { useState } from 'react';

// 自定义 Hook: useLocalStorage
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

使用 useLocalStorage 自定义 Hook

jsx
import React from 'react';
import useLocalStorage from './useLocalStorage';

function Preferences() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <div>
      <h1>Theme: {theme}</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

export default Preferences;
  • 自定义 Hook useLocalStorage：封装了 localStorage 的读写逻辑，使得在组件中操作持久化数据更加方便。
  • 第三方库的集成：封装第三方库时，自定义 Hooks 是一个理想的工具，可以根据需要调整其接口。

使用第三方状态管理库封装自定义 Hook

以 Redux 为例，可以封装自定义 Hook 来简化使用 Redux 的流程。

jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

// 自定义 Hook: useCounter
export function useCounter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  const incrementCount = () => dispatch(increment());
  const decrementCount = () => dispatch(decrement());

  return { count, incrementCount, decrementCount };
}

使用 useCounter 自定义 Hook

jsx
import React from 'react';
import { useCounter } from './useCounter';

function CounterComponent() {
  const { count, incrementCount, decrementCount } = useCounter();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
      <button onClick={decrementCount}>Decrement</button>
    </div>
  );
}

export default CounterComponent;
  • 封装 Redux 逻辑：通过 useCounter 将 Redux 的 dispatch 和 useSelector 简化为一个自定义 Hook，使得状态管理更加直观和易于使用。

总结

  1. 自定义 Hooks 是复用 React 组件逻辑的强大工具。通过将常用的逻辑抽象成 Hooks，不同组件可以共享相同的逻辑，而不需要重复编写代码。
  2. 提高代码复用性：无论是管理窗口大小、处理 API 请求，还是与第三方库集成，自定义 Hooks 都能够帮助我们将逻辑抽象和复用。
  3. 封装第三方库：自定义 Hooks 也可以用于封装第三方库的使用，帮助我们更好地集成外部功能，并将复杂的逻辑封装成易用的接口。

通过这些技巧，可以显著提升代码的可读性和维护性，在不同项目中实现逻辑共享和抽象。