自定义 Hook：提升 React 状态管理

2023-09-02 12:48:39

在现代 React 应用程序中，状态管理是一个至关重要的方面。它使我们能够管理组件之间的共享数据，并随着时间的推移响应用户交互。React 提供了内置的 useState() 钩子，这是一个方便的方法来管理组件内部的状态。然而，当我们需要跨组件共享状态或进行更复杂的逻辑时，自定义 Hook 就派上用场了。

自定义 Hook 的力量

自定义 Hook 是 React 函数，遵循特定的约定：

名称以 use 开头
在组件之外定义
返回一个对象，其中包含状态、更新函数和其他钩子

通过遵循这些约定，自定义 Hook 充当组件和 React 内置 API 之间的桥梁，允许我们创建可重用且解耦的状态管理逻辑。

用例：跨组件共享状态

假设我们有一个应用程序，包含多个需要访问相同状态的组件。例如，我们可能有一个购物车组件，需要存储有关当前购物车项目的信息。使用 useState()，我们将不得不将状态存储在每个组件中，从而导致冗余和不必要的复杂性。

使用自定义 Hook，我们可以定义一个集中式状态管理逻辑。我们可以创建一个名为 useCart 的自定义 Hook，负责管理购物车项目状态。然后，我们的购物车组件和任何其他需要访问购物车状态的组件都可以简单地调用此 Hook。

import { useState, useEffect } from "react";

export const useCart = () => {
  const [cartItems, setCartItems] = useState([]);

  const addItem = (item) => {
    setCartItems([...cartItems, item]);
  };

  const removeItem = (item) => {
    setCartItems(cartItems.filter((i) => i !== item));
  };

  useEffect(() => {
    // 从 localStorage 加载购物车项
    const storedItems = JSON.parse(localStorage.getItem("cartItems"));
    if (storedItems) {
      setCartItems(storedItems);
    }
  }, []);

  useEffect(() => {
    // 保存购物车项到 localStorage
    localStorage.setItem("cartItems", JSON.stringify(cartItems));
  }, [cartItems]);

  return { cartItems, addItem, removeItem };
};