Mobx 在类组件和函数组件使用
安装
yarn add mobx
yarn add mobx-react
父级 入口
1、引入 import { Provider } from 'mobx-react';
2、引入 store.js
new Store()
引入 一个新的store
const stores = {
newStore: new NewStore(),
newStore1: new NewStore1(),
}
3、Provider 注入 {...stores}
类组件使用mobx
任意子页面使用mobx
1、import {withRouter} from 'react-router-dom';
2、import {observer,inject} from 'mobx-react';
3、
@withRouter
@inject('FirstStore')
@observer
函数组件子页面使用mobx
1、import { withRouter} from 'react-router-dom';
2、import {observer,MobXProviderContext} from 'mobx-react';
3、function useStores(name) {
return React.useContext(MobXProviderContext)[name]
}
useStores('FirstStore')
useStores('aaa')
useStores('bbb')
@inject('FirstStore','aaa','bbb')
@withRouter
@observer
withRouter(observer(View))
1、定义state (observable)
2、observer 与页面进行关联
3、action 修改我们的state
2、observer 与页面进行关联
读取
修改
1、定义state (observable)
相当于我们正的state
定义 基础数据类型和复合数据类型
2、setState
action 相当于我们的setState
state observable
setState action