mobx 在类组件中的使用以及函数组件中的使用

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