想通过自定义Hook共享状态？别犯傻了！误解自定义 Hook 的功能不仅可能导致代码错误，还会浪费开发时间。记住，自定义

在 React 中，自定义 Hook 是一种强大的工具，可以帮助我们复用逻辑、简化代码。但在使用过程中，许多开发者对自定义 Hook 的功能产生了误解，尤其是在“跨组件共享状态”这个问题上。有些人认为，通过自定义 Hook 可以实现组件之间状态的共享，这其实是一个常见的错误认识。本文从自定义 Hook 的实现原理出发，探讨为什么它不能真正实现状态共享，并提供清晰的代码示例和替代方案。

什么是自定义 Hook？

自定义 Hook 是一个以 use 开头的 JavaScript 函数，它可以封装一些可复用的逻辑，比如状态管理、事件监听、数据获取等。一个典型的自定义 Hook 可能是这样的：

function useCounter() {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount((prev) => prev + 1);
  return { count, increment };
}

在多个组件中使用时，自定义 Hook 可以提供相同的逻辑功能：

function ComponentA() {
  const { count, increment } = useCounter();
  return (
    <div>
      <p>ComponentA Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function ComponentB() {
  const { count, increment } = useCounter();
  return (
    <div>
      <p>ComponentB Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

乍一看，这种方式似乎可以让两个组件共享状态，但实际上并没有。为了理解为什么，我们需要了解自定义 Hook 的底层原理。

自定义 Hook 的本质

自定义 Hook 本质上是一个普通的 JavaScript 函数。每次调用自定义 Hook 时，它会根据组件的调用顺序在 React 的内部状态存储中为当前组件分配一个独立的状态空间。这意味着，每个组件调用自定义 Hook 时，创建的状态（useState 或 useReducer）是相互独立的，彼此之间并不共享。

以 useCounter 为例，当 ComponentA 和 ComponentB 分别调用 useCounter 时，React 为它们创建了两个独立的状态管理实例。两者的 count 和 increment 方法虽然来源于同一个 Hook 函数，但它们各自对应的状态却互不相干。

为什么自定义 Hook 不能共享状态？

理解这个问题的关键在于 React 的 状态管理机制。以下是几个核心点：

状态绑定到组件实例

React 中的状态是与组件实例绑定的，每次渲染组件时，状态会根据组件的调用顺序和上下文进行维护。自定义 Hook 只是复用了逻辑，但没有改变状态的绑定方式。

每次调用 Hook 都创建新的状态实例

当组件调用 useState 或 useReducer 时，React 在其内部为该组件分配一个状态存储槽。这是一个与组件绑定的独立实例，而不是全局共享的状态。

状态隔离是 React 的设计哲学

React 通过状态隔离来确保组件的可预测性。如果状态可以随意共享，组件之间的边界将变得模糊，可能会导致难以调试的问题。

真正的状态共享：使用 Context

如果想在多个组件之间真正共享状态，应该使用 React 的 Context 机制。以下是一个正确的实现方式：

const CounterContext = React.createContext(null);

function CounterProvider({ children }) {
  const [count, setCount] = React.useState(0);
  const increment = () => setCount((prev) => prev + 1);

  return (
    <CounterContext.Provider value={{ count, increment }}>
      {children}
    </CounterContext.Provider>
  );
}

function useSharedCounter() {
  const context = React.useContext(CounterContext);
  if (!context) {
    throw new Error("useSharedCounter must be used within CounterProvider");
  }
  return context;
}

// 使用 Context 的两个组件
function ComponentA() {
  const { count, increment } = useSharedCounter();
  return (
    <div>
      <p>ComponentA Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

function ComponentB() {
  const { count, increment } = useSharedCounter();
  return (
    <div>
      <p>ComponentB Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

// 根组件
function App() {
  return (
    <CounterProvider>
      <ComponentA />
      <ComponentB />
    </CounterProvider>
  );
}

现在，ComponentA 和 ComponentB 都共享同一个 count 状态，无论在哪个组件中点击按钮，状态都会同步更新。

总结

自定义 Hook 是封装逻辑的利器，但它无法打破 React 的状态隔离原则，因此不能直接实现状态共享。对于需要共享状态的场景，React 提供了更合适的工具，如 Context 或 Redux 等状态管理方案。

误解自定义 Hook 的功能不仅可能导致代码错误，还会浪费开发时间。记住，自定义 Hook 是“逻辑复用”的工具，而不是“状态共享”的工具！