React自定义Hook的状态为何无法在所有组件中同步更新？

问题原因 #

你编写的自定义Hook默认是调用时生成独立状态的：React 中每一次对自定义Hook的调用，都会在调用它的组件内部创建一份完全隔离的状态副本。也就是说：

• PrivacyIcons组件调用usePrivacyMode时，会生成仅属于该组件的isPrivacyOn和setIsPrivacyOn
• 其他需要用到隐私模式状态的组件调用usePrivacyMode时，会另外生成属于自己的状态，和PrivacyIcons内的状态没有任何关联
  因此你在PrivacyIcons中修改状态，只会更新当前组件内的状态副本，不会同步到其他组件。

解决方案 #

要实现跨组件的状态共享，推荐用React Context对该Hook做封装，示例实现如下：

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

// 第一步：创建Context容器
const PrivacyModeContext = createContext();

// 第二步：封装Provider组件，提供全局共享状态
export function PrivacyModeProvider({ children }) {
  const [isPrivacyOn, setIsPrivacyOn] = useState(false);

  return (
    <PrivacyModeContext.Provider value={{ isPrivacyOn, setIsPrivacyOn }}>
      {children}
    </PrivacyModeContext.Provider>
  );
}

// 第三步：封装自定义消费Hook
export default function usePrivacyMode() {
  return useContext(PrivacyModeContext);
}

之后在所有需要用到该状态的组件的公共父组件（通常是应用根组件）外层套上PrivacyModeProvider：

// 根组件示例
import { PrivacyModeProvider } from './usePrivacyMode';

export default function App() {
  return (
    <PrivacyModeProvider>
      {/* 所有业务组件都放在Provider内部 */}
    </PrivacyModeProvider>
  );
}

调整完成后，所有组件调用usePrivacyMode拿到的都是同一份全局状态，任意组件调用setIsPrivacyOn修改状态，所有依赖该状态的组件都会同步更新。如果你的项目已经接入了Redux、Zustand等全局状态管理工具，也可以直接将隐私模式状态放到全局状态中管理，效果一致。

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