高效管理 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;

使用示例

const { data, loading, error } = useFetch<User[]>('/api/users');

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

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

在上述实现中，useFetch Hook 提供了一个简洁的方式来处理 API 请求，同时通过 loading 和 error 状态来管理加载中的 UI 和错误展示。它封装了所有的异步逻辑，避免了在每个组件中重复写 fetch 请求。

2. useDebounce - 防抖处理

防抖用于避免在用户输入时频繁触发事件，尤其是在搜索框、自动完成等场景中。useDebounce 实现了延迟值的更新，直到用户停止输入一段时间后才触发。

代码实现

import { useState, useEffect } from "react";

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

export default useDebounce;

使用示例

const [searchTerm, setSearchTerm] = useState("");
const debouncedSearchTerm = useDebounce(searchTerm, 500);

useEffect(() => {
  // 发起 API 请求或执行其他操作
  console.log(debouncedSearchTerm);
}, [debouncedSearchTerm]);

在上述例子中，useDebounce 延迟了对输入值的响应，从而避免了在用户每次输入时都发起请求。它的使用非常适合搜索框和过滤功能，能够提高性能。

3. useToggle - 简化状态切换

useToggle 是一个简化布尔值状态切换的 Hook，适用于需要频繁切换状态的场景，如显示/隐藏弹窗、展开/收起菜单等。

代码实现

import { useState } from "react";

function useToggle(initialState = false) {
  const [state, setState] = useState(initialState);

  const toggle = () => setState(prev => !prev);

  return [state, toggle] as const;
}

export default useToggle;

使用示例

const [isOpen, toggle] = useToggle(false);

return (
  <div>
    <button onClick={toggle}>Toggle</button>
    {isOpen && <p>Content is visible!</p>}
  </div>
);

useToggle 可以非常简洁地处理布尔类型状态的切换，避免在组件中写冗余的 setState 代码。

4. useLocalStorage - 本地存储管理

useLocalStorage 是一个与 localStorage 配合的 Hook，它能够自动处理数据的获取、存储和更新，确保数据在页面刷新后仍然保持。

代码实现

import { useState } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value: T) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue] as const;
}

export default useLocalStorage;

使用示例

const [name, setName] = useLocalStorage("name", "John Doe");

return (
  <div>
    <p>Your name is: {name}</p>
    <button onClick={() => setName("Jane Doe")}>Change Name</button>
  </div>
);

通过 useLocalStorage，我们不仅能够轻松地获取和设置 localStorage 中的数据，还能在刷新页面后保持数据状态，适用于保存用户设置、主题等信息。

5. useClickOutside - 外部点击监听

useClickOutside 是一个帮助我们监听用户点击外部区域的 Hook，常用于实现点击外部区域关闭弹窗、菜单等交互功能。

代码实现

import { useEffect, useRef } from "react";

function useClickOutside(handler: () => void) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) {
        handler();
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, [handler]);

  return ref;
}

export default useClickOutside;

使用示例

const [isOpen, setIsOpen] = useState(false);
const closeDropdown = () => setIsOpen(false);
const dropdownRef = useClickOutside(closeDropdown);

return (
  <div>
    <button onClick={() => setIsOpen(!isOpen)}>Toggle Dropdown</button>
    {isOpen && (
      <div ref={dropdownRef} style={{ border: '1px solid black', padding: '10px' }}>
        <p>Dropdown content</p>
      </div>
    )}
  </div>
);

useClickOutside 使得我们能够简化对点击外部区域的监听逻辑，减少了冗余代码，提高了交互体验。

总结

自定义 Hook 是 React 开发中非常强大的工具，可以帮助我们复用逻辑，减少冗余代码，提升组件的可维护性和可读性。通过本文介绍的几个常见自定义 Hook（如 useFetch、useDebounce、useToggle、useLocalStorage 和 useClickOutside），我们可以轻松应对许多常见的开发需求，提高应用的性能和用户体验。

希望通过这些实用的自定义 Hook，你能够更高效地管理 React 中的状态和交互逻辑，打造更优雅的代码结构！