MobX 6与mobx-react 7版本下是否需要为应用根节点包裹Provider?
MobX 6 + mobx-react 7 版本的Provider使用规则
核心结论:不再强制要求必须用Provider组件包裹应用根节点,是否使用完全取决于你的store管理方式
不需要使用Provider的场景
- 采用全局单例模式管理store时:如果你的store是单独文件实例化、直接导出全局可引入的单例,组件内部直接import引入store实例使用,这种场景完全不需要Provider包裹根节点。
举个典型的单例写法:
业务组件里直接引入使用即可,整套流程和Provider没有关联,在MobX 6 + mobx-react 7版本下可以完全正常运行,相比旧版的Provider注入方式还减少了一层上下文透传的开销。// stores/index.js export const userStore = new UserStore() export const appStore = new AppStore() - 自己通过React原生的
createContext封装store注入逻辑时,也不需要引入mobx-react自带的Provider。
推荐/仍然需要使用Provider的场景
- 需要实现多套独立store实例并行运行的场景:比如多租户隔离、微前端沙箱、同个页面需要渲染两套状态完全独立的MobX状态树时,Provider可以实现层级化的store注入,嵌套子组件可以拿到离自己最近一层传入的store实例,功能和旧版的Provider完全一致,没有API变更。
- 测试场景下需要灵活替换store实例时:用Provider传入mock版的store实例,不需要修改业务组件内部的import逻辑,就可以完成组件的单测。
新版Provider的写法和旧版完全兼容,和你贴的示例没有区别:<Provider {...stores}> <Router> <Switch> <Route path='/' exact component={RootComponent} /> </Switch> </Router> </Provider>
常见注意事项
- 旧版常用的
inject装饰器在mobx-react 7中属于兼容保留API,官方不再推荐使用。如果你没有特殊的多实例注入需求,不需要为了兼容旧代码硬套Provider,直接引入单例store、搭配observer使用即可。 - 你项目引入的
mobx-persist-store和Provider组件没有任何耦合,不管你的store是单例导出还是通过Provider注入,只要把store实例传给持久化配置的参数就可以正常使用。
内容的提问来源于stack exchange,提问作者Idan
相关产品推荐
相关产品推荐

