React中使用createContext集成Mobx Store的两个技术疑问

初始化Store与Context代码 #

const mainStore = new MainStore(); // mobx store instance
const storeContext = React.createContext(mainStore);
export const useStores = () => React.useContext<typeof mainStore>(storeContext);

ReactDOM.render(
  <React.StrictMode>
    <storeContext.Provider value={{...mainStore}}>
      <NavigationProvider>
        <Router>
          <App />
        </Router>
      </NavigationProvider>
    </storeContext.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

组件使用示例 #

function App() {
    const { authStore } = useStores();
    const history = useHistory();
    return (<>test{authStore.isLogin}</>)
}

疑问1：为何要封装useStores自定义Hook，而非直接在组件中调用React.useContext<typeof mainStore>(storeContext)并直接导出storeContext？ #

• 统一调用逻辑，减少重复代码：封装后所有组件获取Store的方式一致，不用每次都写冗长的React.useContext完整调用。后续如果要修改Store的获取逻辑（比如添加日志、错误处理），只需要改动这一个Hook，所有依赖组件都会自动更新，无需逐个调整。
• 简化TypeScript类型处理：自定义Hook里已经提前指定了typeof mainStore的泛型，组件使用时不用重复声明类型，既减少代码量，也避免了类型写错的可能。
• 隐藏实现细节，降低耦合：组件只需要知道调用useStores()就能拿到Store，不用关心背后是用Context还是其他状态管理方案。如果后续换用其他实现，组件代码无需改动，仅更新useStores的内部逻辑逻辑即可。

疑问2：当创建Context时传入一个默认值，同时给Provider传入另一个值，消费者会使用哪个值？ #

消费者会优先使用Provider提供的值，只有当组件不在该Context的任何Provider覆盖范围内时，才会回退到创建Context时传入的默认值。

比如示例中的App组件被storeContext.Provider包裹，它通过useStores()拿到的是Provider的value属性传递的{...mainStore}对象；如果有组件未被这个Provider包裹，调用useStores()时就会拿到创建Context时传入的mainStore实例。

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