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