create-react-app 使用 Mobx-react

序言

react的状态管理redux一直是阻碍react爱好者激情的原因之一，redux灵活强大，每一步都有着很多的规范和概念。总体学习完成以后会对状态有更深层次的理解。但这也意味着学习成本高。学习过程中概念容易混淆。每一次修改数据都要考虑到很多。

后起之秀

Github 仓库

中文文档

MOBX 推荐使用ESNext装饰器来使用

1.安装依赖

yarn add  mobx
yarn add  mobx-react

2.配置ESNext 装饰器

yarn add --dev @babel/plugin-proposal-decorators 

// package.json

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

3.使用流程

//1.创建store.js

import {
  observable,
  computed,
  autorun,
  action
} from "mobx";

class AppState {
  @observable count = 0;
  @observable name = "charles";
  @computed get msg() {
    return `${this.name} say count is ${this.count}`
  }
  @action add() {
    this.count += 1;
  }
}

const appState = new AppState();

setInterval(() => {
  appState.add()
}, 1000);

autorun(() => {
  console.log('object', appState.msg)
});

export default appState;

//app.js 引入
import React, { Component } from 'react';
import { Provider } from "mobx-react"
import appState from "store"

class App extends Component {
    render() {
        return (
            <Provider appState={appState}>
               <app />
            </Provider>
        )
    }
}
export default App;

//组件中使用

import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import PropTypes from "prop-types";

@inject('appState') @observer
class Navigation extends Component {
    render() {
        console.log(this.props.appState.msg)
        return (
            <div>
                <Boll />
            </div>
        )
    }
}
export default Navigation;

Navigation.PropTypes={
    appState:PropTypes.object
}