react有几种状态管理器，今天先来整理一下mobx状态管理器，首先了解一下什么是mobx
可以干嘛：
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状态管理器了。
原文：https://www.cnblogs.com/mengshou/p/11914584.html