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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值