Mobx-React 用法简述

一、是什么？

一个非常简单的 状态管理工具，对比 Redux，Mobx 会更容易上手，更容易理解，且编写方便。

二、原理

利用 getter、setter 收集组件中的数据依赖关系，从而在数据变化时，精确地知道哪些组件需要重绘，界面规模非常庞大时，就会有很多细粒度的更新。

三、使用方法

1. 直接借助 Javascript（不推荐）

const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable.box(20);
temperature.set(25);

2. ES6 的 装饰器语法

下面会详细介绍 mobx 的装饰器语法使用方式

import { observable, computed } from "mobx";

class OrderLine {
    @observable price = 0;
    @observable amount = 1;

    @computed get total() {
        return this.price * this.amount;
    }
}

3. 使用前的准备

### 1. 安装 mobx
npm install mobx -S

### 2. 安装 mobx 与 react 关联工具
npm install mobx-react -S

### 3. 安装两个插件，以支持 ES6 的 mobx 语法
npm install @babel/plugin-proposal-decorators -D
npm install @babel/plugin-proposal-class-properties -D

### 4. 在 package.json 中配置上述两个插件
"babel": [
  "plugins": [
	[
	  "@babel/plugin-proposal-decorators",
	  {
		"legacy": true
	  }
    ],
    [
	  "@babel/plugin-proposal-class-properties",
	  {
		"loose": true
	  }
    ]
  ]
]

### 5. ESLint 配置
"eslintConfig": {
  "parserOptions": {
	"ecmaFeatures": {
	  "legacyDecorators": true
	}
  }
}

4. 语法

• @observable：定义 state
• @computed：定义一个方法，当依赖的 state 发生改变时，自动重新计算，自动地将最新的结果渲染至调用的地方
• @action：定义操作 state 的方法
• …
• 将所有定义好的 api 封装进一个 store class 即 AppStore
• export AppStore 的实例化对象 store
• 在需要使用 state 的组件外，包装一个 <Provider store={store}></Provider> 组件，内部的所有组件就都可以拿到 store 中的所有 state
• 内部的组件需要使用 store 中的 state 时，需要先借助 @inject 将 store 注入
• 借助 @observer，对页面使用的 store 中的 state 进行观察，使用了该 api，页面的 state 会自动随着 store 中的 state 发生变化
• store 作为 props 被传递至使用 state 的组件
• AppStore 中封装的所有定义的所有方法，都可以在子组件中借助 store.xxx 进行使用

5. 具体应用的 Demo

### 文件结构
|——src
	|——pages
	|	 |——home.js
	|——store
	|	 |——index.js 
	|——App.js
	|——index.js

1）store-index.js

2）App.js

3）page-home.js