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(()=>{这里写逻辑}) runInAction 6.0版本 用makeAutoObservable( )创建对象 不能写箭头函数，所以使用方法时不能解构，不然会失去this
6、 5.0版本案列
目录
src store - index.js - num.js views About - index.jsx
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() { //获取this makeObservable(this) } //声明变量 @observable num = 0; //声明函数 @action increment = () => { this.num += 1 } @action decrement = () => { 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.num return ( <Fragment> <h2>关于页面</h2> <hr /> {num} <button onClick={increment}>增加1</button> <button onClick={decrement}>减小1</button> </Fragment> ) } } export default View
