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

1、安装

1 $ yarn add mobx mobx-react

 

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

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

 1 import { observable,action } from ‘mobx‘
 2 
　　// 观察器(状态)
 3 const appState = observable({
 4   timer: 100
 5 })
　　// 方法
 6 appState.resetTimer = action(() => {
 7   appState.timer = 0
 8 })
 9 // 方法
10 appState.increase = action(() => {
11   console.log(‘increase‘)
12   appState.timer += 1;
13 })
14 
15 export default appState;

 

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

 1 import React from ‘react‘;
 2 import appState from ‘./store‘;   // 添加
 3 import TodoList from "./components/TodoList";
 4 
 5 export default class App extends React.Component {
 6   render() {
 7     return (
 8       <div className=‘app‘>
 9         <Child appState={appState}/>   // 添加
10       </div>
11     )
12   }
13 }

 

4、切换到子组件

 1 import React,{Component} from ‘react‘;
 2 import { observer } from ‘mobx-react‘;
 3 
 4 class Child extends Component {
 5 
 6   constructor(props) {
 7     super(props);
 8   }
 9   // 该绑定方式属于ES7，需要安装babel-preset-stage-2,并添加到.babelrc中
10   _resetTimer = ()=> {
11     this.props.appState.resetTimer()    // 对应appState中action的resetTimer方法
12   }
13   _increase = () => {
14     this.props.appState.increase()  　　// 对应appState中action的increase方法
15   }
16   render() {
17     return (
18       <div>
19         <h2>Child Component</h2>
20         <p>{this.props.appState.timer}</p>
21         <button onClick={this._resetTimer}>复位</button>
22         <button onClick={this._increase}>增加</button>
23       </div>
24     );
25   }
26 }
27 
28 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的值