能否仅在Context中存储更新函数，将状态存于别处实现跨组件状态修改？

完全可以实现这种模式，核心逻辑是让状态由特定组件持有（或外部响应式容器存储），仅将更新状态的setter函数注入Context，这确实能避免状态与更新函数并存的冗余。下面结合代码示例和常见问题原因说明：

实现示例：状态由顶层组件持有，仅传setter到Context #

1. 创建Context #

// AppContext.js
import { createContext, useContext } from 'react';

// 初始值设为undefined即可，后续由Provider注入实际setter
const AppContext = createContext();

export const useAppContext = () => useContext(AppContext);

export default AppContext;

2. 顶层组件持有状态并注入setter #

// App.jsx
import { useState } from 'react';
import AppContext from './AppContext';
import CounterButton from './CounterButton';

function App() {
  // 状态仅在当前组件内部持有，不传入Context
  const [count, setCount] = useState(0);

  return (
    <AppContext.Provider value={setCount}>
      {/* 状态直接在顶层组件渲染展示 */}
      <div>当前计数：{count}</div>
      <CounterButton />
    </AppContext.Provider>
  );
}

export default App;

3. 子组件通过Context调用setter修改状态 #

// CounterButton.jsx
import { useAppContext } from './AppContext';

function CounterButton() {
  const setCount = useAppContext();

  return (
    <button onClick={() => setCount(prev => prev + 1)}>
      点击加1
    </button>
  );
}

export default CounterButton;

你之前尝试失败的常见原因 #

1. Context Provider层级错误：如果调用setter的组件不在Provider的包裹范围内，会拿到Context的默认值（通常是undefined），调用时直接报错。
2. 非响应式外部状态：如果把状态存在普通外部变量而非React的useState/useReducer中，修改状态后不会触发组件重渲染，导致UI无更新。
3. setter引用不稳定：如果在Provider中传递的setter是每次渲染都重新创建的函数（比如直接写匿名函数），可能引发子组件不必要重渲染，但这不影响功能，仅需用useCallback包裹优化即可。

扩展：状态完全存于组件外的实现 #

如果想把状态完全放在组件外（比如全局store），只需确保状态变化能触发组件重渲染：

// globalStore.js
import { useState, useEffect } from 'react';

let internalCount = 0;
let listeners = [];

function setInternalCount(newCount) {
  internalCount = newCount;
  // 通知所有订阅的组件更新
  listeners.forEach(listener => listener());
}

// 自定义hook，用于组件订阅状态变化
export function useGlobalCount() {
  const [, forceRender] = useState(internalCount);

  useEffect(() => {
    listeners.push(forceRender);
    return () => {
      listeners = listeners.filter(l => l !== forceRender);
    };
  }, []);

  return [internalCount, setInternalCount];
}

在App组件中仅把setInternalCount传入Context即可，子组件调用方式和之前一致。

注意事项 #

• 必须保证Context Provider只有一个实例，否则不同Provider下的组件会拿到对应不同状态的setter，这和你提到的前提一致。
• 如果状态不在React组件内持有，必须手动实现状态变化的订阅机制，否则组件无法感知状态更新。

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