如何通过React Hook实现跨页面组件的状态共享？

你遇到的核心问题是：自定义Hook每次调用都会生成独立的状态实例，因此不同组件使用同一Hook时状态无法共享。针对跨页面、多层级的组件状态共享需求，最简便且符合React设计逻辑的方案是结合Context API重构你的Hook，无需引入额外状态管理库。

具体实现步骤 #

1. 创建共享状态的Context与Provider

将状态逻辑提升到全局可访问的Context Provider中：

// src/SharedStateContext.js
import { createContext, useContext, useState } from 'react';

// 创建共享状态的Context
const SharedStateContext = createContext();

// 定义Provider组件，统一管理共享状态和操作方法
export function SharedStateProvider({ children }) {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems(prev => [...prev, `Item ${prev.length + 1}`]);
  };

  // 通过Provider将状态和方法传递给所有子组件
  return (
    <SharedStateContext.Provider value={{ items, addItem }}>
      {children}
    </SharedStateContext.Provider>
  );
}

// 封装自定义Hook，简化Context的调用逻辑
export function useSharedState() {
  const context = useContext(SharedStateContext);
  if (!context) {
    throw new Error('useSharedState必须在SharedStateProvider内部使用');
  }
  return context;
}

2. 改写业务组件

将原来的自定义Hook替换为上述封装好的useSharedState：

// ComponentA.jsx
import { useSharedState } from './SharedStateContext';

export default function ComponentA() {
  const { items, addItem } = useSharedState();
  
  return (
    <div>
      <h2>组件A</h2>
      <button onClick={addItem}>添加元素</button>
      <ul>
        {items.map((item, idx) => <li key={idx}>{item}</li>)}
      </ul>
    </div>
  );
}

// ComponentB.jsx
import { useSharedState } from './SharedStateContext';

export default function ComponentB() {
  const { items, addItem } = useSharedState();
  
  return (
    <div>
      <h2>组件B</h2>
      <button onClick={addItem}>添加元素</button>
      <ul>
        {items.map((item, idx) => <li key={idx}>{item}</li>)}
      </ul>
    </div>
  );
}

3. 在根组件包裹Provider

将整个应用（或所有需要共享状态的组件树）用SharedStateProvider包裹，确保所有目标组件都能访问到共享状态：

// App.jsx
import { SharedStateProvider } from './SharedStateContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

export default function App() {
  return (
    <SharedStateProvider>
      <ComponentA />
      <ComponentB />
      {/* 其他页面或嵌套组件只要在Provider内，就能共享同一状态 */}
    </SharedStateProvider>
  );
}

方案优势 #

• 无额外依赖：完全基于React内置API实现，无需引入第三方状态管理库
• 适配跨层级场景：不管组件分布在哪个页面、嵌套层级多深，只要在Provider范围内就能共享状态
• 保持Hook使用习惯：依然通过自定义Hook获取状态，组件调用方式无需大幅修改

如果后续状态逻辑变得复杂，还可以在Provider中结合useReducer优化状态管理，扩展性极强。

内容的提问来源于stack exchange，提问作者SERG