React中如何在不同组件间共享同一个useState状态

你设想的「把useState定义在共同父组件MainApp中，再分别向两个子组件传递状态/更新方法」的思路是完全正确的，这就是React官方推荐的状态提升模式，是这类跨兄弟组件状态共享场景的最优基础实现，没有问题。

修正后的可运行代码 #

首先把共享状态上移到父组件维护：

const MainApp = () => {
    // 共享状态由最近的共同父组件持有
    const [state, setState] = useState(false);

    return (
        <>
            {/* 给触发状态变更的组件传递更新方法 */}
            <Component1 toggleState={() => setState(prev => !prev)} />
            {/* 给消费状态的组件传递状态值 */}
            <Component2 state={state} />
        </>
    );
};

调整Component1，移除内部的状态定义，通过props接收触发更新的回调即可：

type Component1Props = {
    toggleState: () => void;
};

const Component1 = ({ toggleState }: Component1Props) => {
    return (
        <button type="button" onClick={toggleState}>Toggle</button>
    );
};

Component2只需要把props里的state从可选属性改为必传即可，逻辑不需要改动：

type Props = {
    state: boolean;
};

const Component2 = ({ state }: Props) => {
    return state ? <p>Hello</p> : <p>Not hello</p>;
};

其他方案的适用边界 #

只有遇到以下情况时，你才需要考虑替换实现方式：

• 如果后续组件嵌套层级变深，靠父组件逐层传props会出现多层传递的冗余代码（即props drilling问题），可以使用React内置的useContextAPI实现跨层级状态传递，不需要额外依赖。
• 如果这个共享状态后续需要在大量无直接关联的组件中消费，且关联的更新逻辑非常复杂，再考虑引入Zustand、Redux这类全局状态管理方案。你当前的简单场景用这类工具属于过度设计，会增加不必要的代码复杂度。

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