React项目中使用Mobx状态管理（一）

1、安装

$ yarn add mobx mobx-react

2、新建store/index.js，存放数据(以下思路仅限于父子组件的简单应用)

　　注意：这里暂时没使用装饰器@observable，装饰器和全局数据见下一节

import { observable, action } from 'mobx'

　　// 观察器(状态)
const appState = observable({
  timer: 100
})
　　// 方法
appState.resetTimer = action(() => {
  appState.timer = 0
})
// 方法
appState.increase = action(() => {
  console.log('increase')
  appState.timer += 1;
})

export default appState;

3、回到根组件（父组件）App，引入appState并传入属性

import React from 'react';
import appState from './store';   // 添加
import TodoList from "./components/TodoList";

export default class App extends React.Component {
  render() {
    return (
      <div className='app'>
        <Child appState={appState}/>   // 添加
      </div>
    )
  }
}

4、切换到子组件

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

class Child extends Component {

  constructor(props) {
    super(props);
  }
  // 该绑定方式属于ES7，需要安装babel-preset-stage-2, 并添加到.babelrc中
  _resetTimer = ()=> {
    this.props.appState.resetTimer()    // 对应appState中action的resetTimer方法
  }
  _increase = () => {
    this.props.appState.increase()  　　// 对应appState中action的increase方法
  }
  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>{this.props.appState.timer}</p>
        <button onClick={this._resetTimer}>复位</button>
        <button onClick={this._increase}>增加</button>
      </div>
    );
  }
}

export default observer(Child);    // 非装饰器的普通方式, 将组件传入observer观察器中，否则store接受不到组件的事件

以上是Mobx最简单的使用方法，官方推荐使用装饰器模式。Mobx就类似Vuex， 需要state和action即可完成一个简单的状态管理

大概思路：

1 . 在store中声明状态(state)和方法(action) 分别使用Mobx的observer和action封装

2. 在父组件中导入state并属性传给子组件

3 .子组件通过props接收state, 在自定义的方法中调用store的方法，使store内的方法去改变state的值