React学习笔记 - MobX的使用

Mobx 是一个状态管理库，解决多个组件间的状态交互的问题。

若在 React 中使用，建议配合 mobx-react 库。

npm install mobx mobx-react --save

Mobx 可以使用装饰器语法，参考这篇笔记开启装饰器支持：

• React学习笔记 - Create React App 开启装饰器语法

使用步骤 1. 定义状态并使其可观察

• 创建状态类 Store
• 使用 @observable 装饰器观察状态
• 使用 @action 装饰方法，使其获得行为（这里的 @action 可以被省略）
• 而后将类的实例暴露出去

// store.js
import { observable, action } from 'mobx';

class Store {
  @observable a = 0;
  @observable bbb = 'str';
  @observable c = {};

  // @action
  changeA(val) {
    this.a = val;
  }

  // ...
}

export default new Store();

使用步骤 2. 创建视图观察者以响应变化 + 更改状态

• 定义一个普通的 React 组件

• 引入 @observer 装饰器并装饰组件

• 引入状态类实例 store ，并在组件中使用

• 当触发 action 如 changeA() 方法时，状态 store.a 被修改后，会自动的更新视图中使用改状态的部分

• @observer 装饰器会在状态改变时，自动调用被包装组件的 render 方法

• 调用状态类实例 store.changeA() 方法，来更新状态

// myComponent.jsx
import React from 'react';
import { observer } from 'mobx-react';

import store from './store.js';

@observer
class MyComponent extends React.Component{
  render() {
    return (
      <div>
        <p>{store.a}</p>
        <button onClick={store.changeA(store.a + 1)}>给a增加1</button>
      </div>
    )
  }
}

export default MyComponent;

全局注册 + 注入

上面的方法2是在组件文件内通过 import 引用 store 实例，还有一种全局注册并注入的方式

1. 定义状态，同使用步骤1

2. 使用 Provider 组件包住 App 跟组件，并注入为 rootStore

import React from 'react';
import ReactDOM from 'react-dom';
import store from './store';
import { Provider } from 'mobx-react';

import App from './App';

// 写成函数组件的形式
const Root = () => (<Provider rootStore={store}><App /></Provider>);

ReactDOM.render(<Root />, document.getElementById('root'));

3. 业务组件，使用 @inject 装饰组件类，则可直接使用全局状态实例中的对应状态和方法了

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

@inject('a', 'bbb', 'changeA')
@observer
class myComponent extends React.Component {
  render() {
    <div>
      <p>{this.props.a}</p>
      <p>{this.props.bbb}</p>
      <button onClick={this.props.changeA(store.a + 1)}>给a增加1</button>
    </div>
  }
}

export default MyComponent;

PS：不建议直接使用 this.props.a = 2 去修改状态，而是应该使用状态类中提供的方法进行修改，如 this.props.changeA(2)