如何在两个独立组件间共享持有ComponentA状态的funA函数？

要实现跨组件复用持有ComponentA状态的函数funA，同时解决自定义Hook状态不共享的问题，最直接的方案是利用React Context实现跨组件状态与函数的共享，同时通过useCallback确保函数能捕获到最新的组件状态。

步骤1：创建带Context的共享Hook #

重构自定义Hook，结合Context让所有组件共享同一状态容器：

import { createContext, useContext, useState, useCallback } from 'react';

// 创建共享上下文
const ActionContext = createContext();

// 上下文提供者组件，包裹需要共享状态的组件树
export const ActionProvider = ({ children }) => {
  const [actions, setActions] = useState([]);

  // 用useCallback确保函数引用稳定
  const addAction = useCallback((actionNew) => {
    setActions(prev => [...prev, actionNew]);
  }, []);

  const getActions = useCallback(() => {
    return actions;
  }, [actions]);

  return (
    <ActionContext.Provider value={{ addAction, getActions }}>
      {children}
    </ActionContext.Provider>
  );
};

// 供组件调用的自定义Hook
export const useActions = () => {
  const context = useContext(ActionContext);
  if (!context) {
    throw new Error('useActions 必须在 ActionProvider 内部使用');
  }
  return context;
};

步骤2：在ComponentA中注册持有状态的函数 #

在ComponentA中，用useCallback包裹funA（确保状态更新时函数引用同步更新），再通过共享Hook存入上下文：

import { useState, useCallback } from 'react';
import { useActions } from './useActions';

const ComponentA = () => {
  const [count, setCount] = useState(0);
  const { addAction } = useActions();

  // useCallback 保证funA能捕获最新的count状态
  const funA = useCallback(() => {
    console.log('ComponentA 当前count:', count);
    setCount(prev => prev + 1);
  }, [count]);

  const saveFunA = () => {
    addAction(funA);
  };

  return (
    <div>
      <p>ComponentA Count: {count}</p>
      <button onClick={saveFunA}>将funA存入共享列表</button>
    </div>
  );
};

步骤3：在ComponentB中调用共享的函数 #

ComponentB通过共享Hook获取函数列表，调用时就能访问ComponentA的最新状态：

import { useActions } from './useActions';

const ComponentB = () => {
  const { getActions } = useActions();

  const callFunA = () => {
    const actions = getActions();
    if (actions.length > 0) {
      // 调用最新存入的funA
      actions[actions.length - 1]();
    }
  };

  return (
    <div>
      <button onClick={callFunA}>调用ComponentA的funA</button>
    </div>
  );
};

步骤4：用Provider包裹组件树 #

在App或上层组件中用ActionProvider包裹ComponentA和ComponentB，确保它们处于同一上下文：

import { ActionProvider } from './useActions';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const App = () => {
  return (
    <ActionProvider>
      <ComponentA />
      <ComponentB />
    </ActionProvider>
  );
};

export default App;

关键说明 #

• 之前的Hook无效原因：每个组件调用自定义Hook时，都会创建独立的useState实例，状态完全隔离。而Context方案让所有组件共享同一useState状态，实现了跨组件数据同步。
• useCallback的作用：如果不包裹funA，当ComponentA的状态更新时，funA的引用不会变化，存入共享列表的将是旧版本的函数，调用时会捕获到过时的状态值。

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