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的值