mobx入门教程

背景

React的自身的状态本身由state和setState维护；但是随着应用复杂度的提升（组件间状态共享及状态变更），单纯通过setState进行状态管理的方案不仅变得代码复杂、难以维护，而且影响可扩展性；

针对这种状况，React目前主要有Redux和mobx两种解决方案（均可以让状态逻逻辑从展示组件等解耦出来，提高扩展性与复用性）；

mobx与Redux有什么不同？

1. Redux采用FP原则，核心为action、store、reducer，采用单一数据源，状态不可变更（总是返回一个新状态），使用纯函数进行状态变更；

   (state, action) => newState
   

2. mobx采用OOP原则，也是响应式编程；采用observable和observer的概念，observable中将对象变为被观察对象，可以通过action等变更状态；observer定义观察对象，可以观察被观察对象的变更并应用；mobx中状态是可变的，更加轻量级，入门比Redux简单；

3. 要点比较
   
   

Mobx概述

mobx支持单向数据流，由原始状态衍生的值都会自动变更，无法观察到中间值；

1. 创建应用模型，定义状态使其可观察（建立store，即被观察对象）
2. 创建视图以响应状态的变化（创建观察者，检测并响应状态变化）
3. 更改状态

环境配置

mobx使用装饰器特性的话需要开启ES7的decorator属性；可以安装插件@babel/plugin-proposal-decorators"在package.json中添加以下配置：

  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }

否则，可以借助mobx API —— decorate(object, decorators)实现部分功能

Mobx API —— observable相关

1. 描述：observable用于创建被观察对象（定义可观察状态），需要注意的是被观察对象总是类的属性而不是值；

2. 用法：

   // 用法一, 会自动递归到整个对象
   observable(value)
   
   // 用法二 是extendObservable(this, { property: value})的语法糖
   @observable classProperty = value
   
   // demo
   import { observable, computed } from "mobx";
   
   class Order {
       @observable price = 0;
       @observable count = 1;
   
       @computed get total() {
           return this.price * this.count;
       }
   	
   	@action.bound
   	increasePriice() {
   		this.price++;
   	}
   }
   
   // demo2 —— 使用decorate重写demo
   import { observable, computed, decorate } from 'mobx';
   
   class Order {
   	price = 0;
   	count = 1;
   
   	get total() {
   		return this.price * this.count;
   	}
   	
   	increasePriice() {
   		this.price++;
   	}
   }
   
   decorate(Order, {
   	price: observable,
   	count: observable,
   	total: computed,
   	increasePrice: action.bound
   })
   

Mobx API —— 对observable做出响应

1. computed——计算值

• 含义：computed可以根据现有的状态或其他计算值衍生出新的值，并且这些值可以被observer使用；autorun主要适用于产生一个副作用而不是一个新值，如日志打印和网络请求等；

• 要点：
  computed是响应式的，如果前一个依赖计算的值未发生变化，计算属性不会重新运行，这种情况下它会被暂停（自动暂停特性）。同时，如果一个计算属性不再被观察，其将会自动进行垃圾回收。

  不要把 computed 和 autorun 搞混。它们都是响应式调用的表达式，但是，如果你想响应式的产生一个可以被其它 observer 使用的值，请使用 @computed，如果你不想产生一个新值，而想要达到一个效果，请使用 autorun。 举例来说，效果是像打印日志、发起网络请求等这样命令式的副作用。

• 用法：

  // 用法一：函数形式
  computed(expression)
  // demo
  import {observable, computed} from "mobx";
  var name = observable.box("John");
  
  var upperCaseName = computed(() =>
      name.get().toUpperCase()
  );
  
  var disposer = upperCaseName.observe(change => console.log(change.newValue));
  
  name.set("Dave"); // 输出: 'DAVE'
  
  // 用法二：装饰器。在任意属性的getter上使用
  @computed get propertyName() {
  	return
  }
  
  

2. autorun——自定义反应

• 含义：如果创建一个函数，本身不会有观察者，并且其不产生新值而是用于产生一个副作用（网络请求/日志打印/更新UI）等时，需要使用autorun；

• 要点：
  computed(function) 创建的函数只有当它有自己的观察者时才会重新计算，否则它的值会被认为是不相关的。而autorun创建后会立即运行一次；

• 用法
  第一个参数一般为函数（如果是字符串，将被用作调试名），第二个参数为可选的对象参数，包括属性：delay（去抖时间）/name（reaction名称）/onError（处理reaction错误）/scheduler（设置自定义调度器决定autorun函数如何重新运行）

  autorun(() => {
  	xxx
  }, { delay: 200 })
  

3. reaction——自定义反应

• 含义：可以将reaction看作是autorun的变种，为`observable的追踪提供了更加细粒度的控制；

• 用法：
  第一个为数据追踪函数，第二个为副作用函数（其中的任何observable都不会被追踪）；第三个为可选的对象参数；
  只用在数据追踪函数返回新值时副作用函数才会运行；

  reaction(() => data, (data, reaction) => { sideEffect }, options?)
  

• demo:

  // 只调用一次并清理掉 reaction : 对 observable 值作出反应。
  const reaction3 = reaction(
      () => counter.count,
      (count, reaction) => {
          console.log("reaction 3: invoked. counter.count = " + count);
          reaction.dispose();
      }
  );
  
  counter.count = 1;
  // 输出:
  // reaction 3: invoked. counter.count = 1
  
  counter.count = 2;
  // 输出:
  // (There are no logging, because of reaction disposed. But, counter continue reaction)
  

4. @observer——函数装饰器

• 含义：可以将React组件转为响应式组件，响应被观察对象的改变；

• 要点：它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件

• 用法：

  当 observer 需要组合其它装饰器或高阶组件时，请确保 observer 是最深处(第一个应用)的装饰器，否则它可能什么都不做。

  observer(class Demo ... { })
  
  @observer class Demo extends React.Component {
  	...
  }
  
  const Demo = observer(({ data }) =>
      <span>type: { data.type } </span>
  );
  

5. 使用 inject 将组件连接到提供的 stores

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

@inject('store')
@observer
class Casual extends React.Component {

    render() {
        return (
            <div>
                <h2>num: {this.props.store.num}</h2>
                <button onClick={this.handleClick}>increment</button>
            </div>
        )
    }

    handleClick = () => {
        this.props.store.increment();
    }
}

export default Casual;


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


class Store {
    
    @observable num = 0;

    @computed get retNum() {
        return `the value of num is ${this.num}`
    } 

    @action.bound
    increment() {
        this.num++;
    }
}

export default Store;

6. componentWillReact

1. 含义：当组件因为它观察的数据发生重新渲染时，会触发该生命周期函数；可以追溯渲染并找到导致渲染的操作

2. 要点：componentWillReact不接受任何参数；初始化渲染时不会被触发；

   @observer 以和 PureComponent 同样的方式实现了 shouldComponentUpdate，因此子组件可以避免不必要的重新渲染

3. demo：

   import {observer} from "mobx-react";
   
   @observer class TodoView extends React.Component {
       componentWillReact() {
           console.log("I will re-render, since the todo has changed!");
       }
   
       render() {
           return <div>this.props.todo.title</div>;
       }
   }
   

Mobx API —— 改变observables

1. action

• 含义：用于修改状态；

• 用法

  action(fn)
  action(name, fn)
  @action classMethod() {}
  @action(name) classMethod() {}
  // @action.bound可以自动绑定到目标对象（即指定了this作用域）
  @action.bound classMethod() {} 
  ...
  

• action.bound不要和箭头函数一起使用；

---

参考文献

1. mobx中文文档
2. Ten minute introduction to MobX and React
3. Redux vs MobX without Confusion
4. Becoming fully reactive: an in-depth explanation of MobX