React函数组件中，如何在useState更新后通知其他组件获取最新值？

核心问题分析 #

useState的更新是异步的，子组件通过Context获取的state是闭包捕获的旧值——即使父组件触发了状态更新，订阅回调执行时子组件仍会拿到更新前的状态。useStateRef仅能让更新回调自身获取最新值，useStateCallback也局限于回调内部，都无法让其他组件同步拿到更新后的状态。

可行解决方案：结合useRef同步状态+订阅通知机制 #

通过useRef存储最新状态值，确保在状态更新完成后，订阅者能直接访问到最新值，而非依赖闭包捕获的旧状态。

1. 实现带状态同步的Context提供者 #

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

const AppContext = createContext();

export function AppProvider({ children }) {
  const [state, setState] = useState("bar");
  const stateRef = useRef(state); // 用ref同步最新状态

  // 封装状态更新方法：更新state后同步ref并触发通知
  const updateState = useCallback((newValue) => {
    setState(newValue, () => {
      stateRef.current = newValue;
      notifySubscribers();
    });
  }, []);

  // 订阅管理
  const subscribers = useRef([]);
  const subscribe = useCallback((callback) => {
    subscribers.current.push(callback);
    return () => {
      subscribers.current = subscribers.current.filter(cb => cb !== callback);
    };
  }, []);

  // 通知所有订阅者
  const notifySubscribers = useCallback(() => {
    subscribers.current.forEach(callback => {
      callback(stateRef.current); // 直接传递最新状态值
    });
  }, []);

  return (
    <AppContext.Provider value={{ 
      getCurrentState: () => stateRef.current, // 提供获取最新状态的方法
      subscribe, 
      updateState 
    }}>
      {children}
    </AppContext.Provider>
  );
}

export function useSomeContext() {
  return useContext(AppContext);
}

2. 子组件订阅并获取最新状态 #

import { useEffect } from 'react';
import { useSomeContext } from './AppProvider';

function ChildComponent() {
  const { subscribe, getCurrentState } = useSomeContext();

  useEffect(() => {
    const unsubscribe = subscribe((latestState) => {
      console.log("更新后的状态值:", latestState);
      // 若需要在组件渲染中使用，可更新本地状态
      // setLocalState(latestState);
    });

    // 初始化时也可获取当前最新状态
    console.log("初始状态:", getCurrentState());

    return unsubscribe;
  }, [subscribe, getCurrentState]);

  return <div>当前状态：{getCurrentState()}</div>;
}

3. 触发状态更新的组件示例 #

import { useCallback } from 'react';
import { useSomeContext } from './AppProvider';

function TriggerComponent() {
  const { updateState } = useSomeContext();

  const handleClick = useCallback(() => {
    updateState("foo");
  }, [updateState]);

  return <button onClick={handleClick}>更新状态</button>;
}

方案优势 #

• 状态更新完成后立即触发通知，确保订阅者拿到的是最新值
• 避免了闭包导致的旧状态问题，stateRef.current始终指向最新状态
• 订阅机制灵活，支持多组件监听状态变化

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