react状态管理器之mobx

Posted 2020-11-22 mengshou

　　react有几种状态管理器，今天先来整理一下mobx状态管理器，首先了解一下什么是mobx

　　1、mobx成员: observable action

　　可以干嘛： 

　　MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性作出变更或者引用的时候，触发其依赖的监听函数；整体的store注入机制采用react提供的context来进行传递

　　

　　怎么用: 定义类

　　@observable 装饰store类的成员，为被观察者

　　@action 实例方法, 修改状态，同步异步都修改，不推荐组件内部改

　　用在哪: react

　　2、mobx-react成员: inject,observer,Provider

　　Provider: 顶层提供store的服务，Provider store={store}

　　inject: 注入Provider提供的store到该组件的props中，组件内部使用

　　inject 是一个高阶组件 高阶组件返回的是组件，作用在包装组件

　　场景: export default inject(‘store‘)(react函数式组件)

　　@inject 是装饰器，装饰的是类本身和类成员，

　　@inject(‘store‘) class 类组件

　　observer: 设置当前组件为观察者,一旦检测到store中被监测者发生变化就会进行视图的强制刷新

　　@observer class 类组件 ..

　　const 组件=observer((store)=>{jsx})

 

　　说了这么多，到底怎么用呢？不要着急，因为mobx用到了es7语法，编辑器可能会出现解析不了的情况，我们需要先进性配置；

　　1、安装依赖

　　

cnpm i @babel/plugin-proposal-decorators --save

　　2、配置package.json文件，可以crtl + f查找babel。

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

　　3、安装依赖

cnpm i mobx mobx-react -S

　　4、在项目的src文件夹下创建store/index.js，我在这里以获取商品列表数据为例

// 引入分模块
import HomeStore from ‘./home‘;
// 创建仓库
class Store {
  constructor () {
    this.home = new HomeStore(this);
  }
}
export default new Store();

　　5、创建组件 分模块 store/home.js

import { observable, action } from ‘mobx‘;
class HomeStore {
  constructor (store) {
    this.store = store
    this.getProlist = this.getProlist.bind(this);
  }
  // 初始的状态
  @observable prolist = [1, 2, 3]

  // 函数
  @action
  getProlist () {
    // 异步操作，我在这里就不去请求接口了，自己模拟一下
    this.prolist = [4, 5, 6]
  }
}

export default HomeStore;

　6、在入口文件index.js中引入store，并引入Provider监控状态是否改变

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;
import App from ‘./App‘;
import * as serviceWorker from ‘./serviceWorker‘;
import { Provider } from ‘mobx-react‘; // 引入Provider
import store from ‘./store‘; // 引入store


ReactDOM.render(
<Provider store = { store }> // 传参
  <App />
</Provider>, 
document.getElementById(‘root‘));

serviceWorker.unregister();

　　7、创建组件views/home/index.jsx

import React, { Component } from ‘react‘;
import { observer, inject } from ‘mobx-react‘;

// 依赖注入 + 观察者
@inject(‘store‘)
@observer
class Com extends Component {
  // 获取状态 this.props.store.home.prolist
  // 获取函数 this.props.store.home.getProlist
  render () {
    let { store: { home: { prolist, getProlist }}} = this.props
    return (
      <div>
        <button onClick={ () => {
          getProlist()
        }}>change</button>
        {
          prolist.map((item, index) => {
            return <p key={ index }>{item}</p>
          })
        }
      </div>
    )
  }
}

export default Com;

　　如此，就实现了mobx状态管理器了。