mobx的使用

1、API

mobx-react
- Provider 包裹根组件，用于传递数据
- observer 组件变为响应式
- inject 接收mobx实例(用于类组件)
- MobXProviderContext
mobx
- observable 声明变量
- action 声明函数用于修改observable 的值
- makeObservable 更新状态

2、安装

yarn add mobx
yarn add mobx-react
使用@语法糖需要安装
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties

3、安装之后需要修改package.json文件

	"presets": [["react-app"],["@babel/preset-react"]],"plugins": [["@babel/plugin-proposal-decorators", {"legacy": true }],["@babel/plugin-proposal-class-properties", { "loose" : true }]]

现在就已经可以正常使用mobx了

4、父级入口管理

1、引入mobx-react中的Provider
import {Provider} from 'mobx-react'
2、将仓库中的类进行集中管理

const stores ={store1 = new Store1( ),store2 = new Store2( ),……
}

3、通过Provider向下传递
<Proveder {...stores}></Provider>

5、子组件接收（类组件、函数组件）

类组件
1、从react-router-dom引入withRouter
import {withRouter} from 'react-router-dom';
2、从mobx-react中引入inject和observer；
3、使用

@withRouter  //更新的作用
@inject('store1','store2')  //接收
@observer         //组件变为响应式
//这三步会把对应的store挂在props上

函数组件
1、从react-router-dom引入withRouter
2、从mobx-react中引入inject和MobXProviderContext；
3、使用

//获取mobox实列
//const Store1 = React.useContext(MobXProviderContext)['Store1'];//简单封装之后
function useStore(name) {return React.useContext(MobXProviderContext)[name]
}
const Store1 = useStore('Store1')export default withRouter(observer(componentName))

5.0版本
用class类创建仓库
大多使用`@`语法糖
声明变量 @observable  
声明函数 @action （用箭头函数，不然解构会失去this）
监测更新 makeObservable(this)configure   //开启严格模式之后需要用runInAction(()=>{这里写逻辑}) 
runInAction6.0版本 
用makeAutoObservable( )创建对象
不能写箭头函数，所以使用方法时不能解构，不然会失去this

6、 5.0版本案列

src/store/index.js

这个文件主要是引入所有的mobx文件，做一个统一的导出

import Num from './num.js';const stores = {num: new Num()
}export default stores;

src/store/num.js

import { observable, action, makeObservable } from 'mobx';class Num {constructor() {//获取thismakeObservable(this)}//声明变量@observable num = 0;//声明函数@actionincrement = () => {this.num += 1}@actiondecrement = () => {this.num -= 1}
}export default Num

src/views/About/index(函数组件写法)

withRouter数据更新 +MobXProviderContext接收变量+observer 数据响应

import React, { Fragment, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { MobXProviderContext,observer } from 'mobx-react'
const View = () => {const {num,increment,decrement} = React.useContext(MobXProviderContext)['num']useEffect(() => {console.log(num)},[])return (<Fragment><h2>关于页面</h2><hr />{num}<button onClick={increment}>增加1</button><button onClick={decrement}>减小1</button></Fragment>)
}export default withRouter(observer(View))

src/views/About/index(类组件写法)

withRouter更新+inject接收+observer数据响应
inject接收的是store的属性
通过this.props可以拿到值

import React, { Fragment,Component } from 'react';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react';
//这里注意要放在组件之外
@withRouter
@inject('num')
@observer
class View extends Component{componentDidMount() {console.log(this.props.num)}render() {let {num,increment,decrement}=this.props.numreturn (<Fragment><h2>关于页面</h2><hr />{num}<button onClick={increment}>增加1</button><button onClick={decrement}>减小1</button></Fragment>)}
}export default View