巧用自定义 hook 在 React 状态管理中实现跨组件状态同步

2023-09-04 05:31:57

在现代前端开发中，React 以其声明式编程模型和强大的生态系统备受青睐。但随着应用规模的不断增长，如何管理组件间的状态成为了一个难题。

举个常见的例子，假设我们在开发一个网页，其中包含一个主题切换组件和一个显示当前主题颜色的组件。这两个组件在 DOM 结构上相距甚远，但它们都需要共享同一个主题色状态。传统的做法是使用 Redux 或 MobX 等状态管理库来管理这个共享状态。然而，这些库往往会引入额外的复杂性和学习成本。

为了解决这个问题，我们可以使用 React 提供的自定义 hook 机制来实现组件间状态同步。自定义 hook 是一种在函数组件中复用状态逻辑的机制，它可以让我们将组件的内部状态提取出来，以便在其他组件中重用。

首先，我们定义一个名为 useTheme 的自定义 hook：

import { useState, useEffect } from "react";

const useTheme = () => {
  const [themeColor, setThemeColor] = useState("light");

  useEffect(() => {
    // 从 localStorage 中获取主题颜色
    const storedThemeColor = localStorage.getItem("themeColor");
    if (storedThemeColor) {
      setThemeColor(storedThemeColor);
    }
  }, []);

  const toggleTheme = () => {
    setThemeColor((prevThemeColor) => (prevThemeColor === "light" ? "dark" : "light"));
  };

  return { themeColor, toggleTheme };
};

export default useTheme;

这个自定义 hook 使用 useState 和 useEffect 钩子来管理主题色状态。useEffect 钩子会在组件挂载时从 localStorage 中获取主题颜色，并将其作为初始状态。toggleTheme 函数用于切换主题颜色。

接下来，我们可以在 ThemeSwitch 组件中使用这个自定义 hook：

import useTheme from "./useTheme";

const ThemeSwitch = () => {
  const { themeColor, toggleTheme } = useTheme();

  return (
    <button onClick={toggleTheme}>
      {themeColor === "light" ? "切换为深色模式" : "切换为浅色模式"}
    </button>
  );
};

export default ThemeSwitch;

在这个组件中，我们首先导入 useTheme 自定义 hook，然后通过解构赋值的方式获取 themeColor 和 toggleTheme 两个函数。最后，我们在按钮的点击事件处理函数中调用 toggleTheme 函数来切换主题颜色。

最后，我们在 DisplayThemeColor 组件中使用这个自定义 hook：

import useTheme from "./useTheme";

const DisplayThemeColor = () => {
  const { themeColor } = useTheme();

  return (
    <div style={{ color: themeColor }}>
      当前主题颜色：{themeColor}
    </div>
  );
};

export default DisplayThemeColor;