mobx的使用

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