高效管理 React 状态和交互：我的自定义 Hooks 实践

高效管理 React 状态和交互：自定义 Hooks 实践

在 React 中，Hooks 是一种使我们能够在函数组件中使用状态和副作用的强大工具。随着项目的增大，重复的逻辑可能会出现在多个组件中，这时使用自定义 Hooks 就非常合适。它们帮助我们将业务逻辑抽象成独立的功能模块，提升代码的可复用性和可维护性。

本文将介绍一些常见的自定义 Hook 实践，包括数据获取、去抖、状态切换、本地存储管理和点击外部区域关闭组件等。通过这些自定义 Hook，我们能够高效管理应用的状态和交互逻辑。

1. useFetch - 数据获取 Hook

useFetch 是一个处理数据获取请求的自定义 Hook。它封装了 fetch 请求的逻辑，并提供了 loading 和 error 状态，方便组件根据请求状态渲染不同的内容。

代码实现

import { useState, useEffect } from "react";

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) throw new Error("Network response was not ok");
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

使用示例