上篇文章 create-react-app + webpack + antd + less + mobx 的 demo 入门配置 简单介绍了一个笔者使用的最基本的 react 配置,简单引入了 mobx. 现在问题是 如果 store 越来越多,会导致引用混乱,非常不便于开发.因此在阅读了几篇文章之后,我尝试给出一个相对较好的使用方法. 参考文章; 保有对子 store 的引用
provider,inject 引入 react 官方文档
统一管理 Store
针对越来越多的 store, 可以考虑使用 一个总 Store,保持对每个子 Store 的引用.如有必要,可以在子 Store 中传入父 Store,让子 Store 也可以访问到父 Store.
实践一
import CountStore from './CountStore'
import ChangeNameStore from './ChangeNameStore'
class Store {
constructor() {
this.countStore = new CountStore()
this.changeNameStore = new ChangeNameStore()
}
}
export default new Store()
如上,简单创建的两个子 Store.在需要使用数据的地方,import store 即可, 看下面例子:
ChangeNameStore 如下:
const ChangeName = (observer( ( {} ) => {
return (
<div className='Change'>
<div>{store.changeNameStore.name}</div>
<div className="buttons">
<Button type="primary" className="btn" onClick={() =>
store.changeNameStore.changeName()
}>change</Button>
</div>
</div>
);
}))
export default ChangeName;
运行程序,点击按钮可以看到 name 改变.
import {
observable,
action
}
from 'mobx'class ChangeNameStore {@observable name = "sun"@action changeName() {
if (this.name === "sun") {
this.name = "wen"
} else {
this.name = "sun"
}
}
}
export
default ChangeNameStore;
这种方式引用方便,哪里用到 store 就哪里 import.弊端就是如果 store 的层级越来越多,会导致代码难以编写.
实践二
官方参考 redux,给出了 Provider 和 inject 组件,推荐使用 DI 方式去管理 store,这也是我觉得最好的方式. 首先也是由一个 stores 保持有对所有子 store 的引用, 接着使用 Provider 组件将 stores 传递给父组件.
如上,下面是怎么使用 inject 是自组件可以访问 store.
import CountStore from './mobx/CountStore'
import ChangeNameStore from './mobx/ChangeNameStore'
const countStore = new CountStore();
const changeNameStore = new ChangeNameStore();
const stores = {
countStore,
changeNameStore,
}
class App extends Component {
render() {
return (
<Provider {...stores}>
<Home/>
</Provider>
);
}
}
export default App;
推荐使用无状态组件,将需要的 store 直接传入组件,其他使用方法与之前无区别. 如此以来,无论 store 的层级有多少,针对单一功能组件原则, 可以将最小的 store 引入,方便管理.
const ChangeName = inject("changeNameStore")(observer(({
changeNameStore
}) = >{
return ( < div className = 'Change' > <div > {
changeNameStore.name
} < /div>
<div className="buttons">
<Button type="primary" className="btn" onClick={() =>
changeNameStore.changeName()
}>change</Button > </div>
</div > );
})) export
default ChangeName;
最佳实践的代码见 github:https://github.com/yunshuipiao/react-web-demo
来源: https://juejin.im/post/5a535271f265da3e5859329b