mobx 在ReactJS项目中的运用

mobx 能干什么

使用 react 写小型应用，数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段，引入任何状态管理库，都算是奢侈的。但是随着页面逻辑的复杂度提升，在中大型应用中，数据、业务逻辑和视图，如果不能很好的划分，就很有可能出现维护难、性能低下的问题。

业内比较成熟的解决方案有 redux，但是 redux 使用过程中，感觉较复杂和繁琐。那么为什么不简单一点呢？mobx 的核心理念是 简单、可扩展的状态管理库。这可能正是你想要的。

react 关注的状态(state)到视图(view)的问题。而 mobx 关注的是状态仓库（store）到的状态(state)的问题。

核心的概念1

mobx 最最核心的概念只有2个。 @observable 和 @observer ，它们分别对应的是被观察者和观察者。这是大家常见的观察者模式，不过这里使用了，ES7 中的 装饰器。

使用 @observable 可以观察类的值。

这里使用 @observable 将 Store 的 todos 变为一个被观察的值。

observable

仓库

// 这里引入的是 mobx
import {observable} from 'mobx';

class Store {
  @observable todos = [{
    title: "todo标题",
    done: false,
  }];
}

observer

mobx 组件

然后再使用 @observer ，将组件变为观察者，响应 todos 状态变化。
当状态变化时，组件也会做相应的更新。

// 这里引入的是 mobx-react
import {observer} from 'mobx-react';

@observer
class TodoBox extends Component  {
  render() {
    return (
      <ul>
        {this.props.store.todos.map(todo => <li>{todo.title}</li>)}
      </ul>
    )
  }
}

完整的 demo 如下。

import React, {Component} from 'react';
import { render } from 'react-dom';
import {observable} from 'mobx';
import {observer} from 'mobx-react';

// 最简单的 mobx 就是一个观察者模式

class Store {
  // 被观察者
  @observable todos = [{
    title: "完成 Mobx 翻译",
    done: false,
  }];
}

// 观察者
@observer
class TodoBox extends Component  {
  render() {
    return (
      <ul>
        {this.props.store.todos.map(todo => <li>{todo.title}</li>)}
      </ul>
    )
  }
}


const store = new Store();

render(
  <TodoBox store={store} />,
  document.getElementById('root')
);

通过以上的简单的例子，展现了 mobx 分离数据、视图的能力。

核心概念2

这一小节要介绍的两个概念虽然也是核心概念，但是是可选的。

前面例子，只讲了状态的读取，那么状态应该如何写入呢？

答案是直接写入！

@observer
class TodoBox extends Component  {
  render() {
    return (
      <div>
        <ul>
          {this.props.store.todos.map(
            (todo,index) => <li key={index}>{todo.title}</li>
          )}
        </ul>
        <div>
          <input type="button" onClick={() => {
            // 直接修改仓库中的状态值
            this.props.store.todos[0].title = "修改后的todo标题"
          }} value="点我"/>
        </div>
      </div>
    )
  }
}

细心的朋友一定发现了奇怪的地方，react 官方说过 props 值不能直接修改，但是引入 mobx 后 props 可以直接修改了，这太奇怪了！

解决办法就是 mobx 的下一个概念 action。

actions
首先在 Store 中，定义一个 action。

class Store {
  @observable todos = [{
    title: "todo标题",
    done: false,
  }];
  @action changeTodoTitle({index,title}){
    this.todos[index].title = title
  }
}

在 Component 中调用，这样通过 action 的方法，就避免了直接修改 props 的问题。

<input type="button" onClick={() => {
  this.props.store.changeTodoTitle({index:0,title:"修改后的todo标题"});
}} value="点我"/>

可以通过引入 mobx 定义的严格模式，强制使用 action 来修改状态。

import {useStrict} from 'mobx';

useStrict(true);

computed values

在有些时候，state 并不一定是我们需要的最终数据。例如，所有的 todo 都放在 store.todos 中，而已经完成的 todos 的值(store.unfinishedTodos)，可以由 store.todos 衍生而来。

对此，mobx 提供了 computed 装饰器，用于获取由基础 state 衍生出来的值。如果基础值没有变，获取衍生值时就会走缓存，这样就不会引起虚拟 DOM 的重新渲染。

通过 @computed + getter 函数来定义衍生值（computed values）。

import { computed } from 'mobx';

class Store {
  @observable todos = [{
    title: "todo标题",
    done: false,
  },{
    title: "已经完成 todo 的标题",
    done: true,
  }];

  @action changeTodoTitle({index,title}){
    this.todos[index].title = title
  }

  @computed get finishedTodos () {
    return  this.todos.filter((todo) => todo.done)
  }
}

mobx 有一套机制，如果衍生值（computed values）所依赖的基础状态（state）没有发生改变，获取衍生值时，不会重新计算，而是走的缓存。因此 mobx 不会引起过度渲染，从而保障了性能。

当渲染的值为 finishedTodos ，点击修改标题，不会在控制台打印 “render”;
换成 todos，就会打印 “render”.
这是由于已完成的 todos 值没有改变，所以不会重新计算，而是走的缓存。因此不会调用 render 方法。

完整 demo 如下

import React, {Component} from 'react';
import { render } from 'react-dom';
import {observable, action, computed,useStrict} from 'mobx';
import {observer} from 'mobx-react';

useStrict(true);


class Store {
  @observable todos = [{
    title: "todo标题",
    done: false,
  },{
    title: "已经完成 todo 的标题",
    done: true,
  }];

  @action changeTodoTitle({index,title}){
    this.todos[index].title = title
  }

  @computed get unfinishedTodos () {
    return  this.todos.filter((todo) => todo.done)
  }
}


@observer
class TodoBox extends Component  {

  render() {
    console.log('render');
    return (
      <div>
        <ul>
          { /* 把 unfinishedTodos 换成 todos，点击修改标题就会在控制台打印 "render".*/ }
          {this.props.store.unfinishedTodos.map(
            (todo,index) => <li key={index}>{todo.title}</li>
          )}
        </ul>
        <div>
          <input type="button" onClick={() => {
            this.props.store.changeTodoTitle({index:0,title:"修改后的todo标题"});
          }} value="修改标题"/>
        </div>
      </div>
    )
  }
}

const store = new Store();

render(
  <TodoBox store={store} />,
  document.getElementById('root')
);

小结
翻译了官网的一段文章，就拿过来做小结了。

mobx 是一个的简单、可扩展的状态管理库。它背后的哲学非常简单：

应用程序 state 是最基础的数据。任何可以从 state 中衍生出来的数据，都应该自动的被衍生出。

actions 是唯一能够改变 state 的方法。

state 是最基础的数据，它不应该包含冗余的和派生的数据。

computed values 派生值是通过纯函数从 state 中派生而来的。当派生值依赖的状态发生变化了，Mobx 将会自动更新派生值。如果依赖的状态没有改变，mobx 会做优化处理。

reactions 也是派生数据，是从 state 中派生而来的。它的副作用是自动更新 UI。（注：mobx 有一个 reaction 接口，当 state 改变时，就会调用它的回调。UI 是通过 reaction 更新的。）

React 和 MobX 是非常强大的组合。React 提供了将应用状态映射为可渲染的组件树的机制。MobX 提供存储和更新应用状态的机制，供 React 使用。

React 和 MobX 提供了开发过程中常见问题的解决方案。 React 通过使用虚拟 DOM，减少了对浏览器 DOM 的操作。MobX 通过使用了响应式虚拟依赖状态图(reactive virtual dependency state graph) ，提供了应用程序状态与 React 组件同步的机制，这样 state 只会在需要时更新才会更新。（译者注：这段有点难理解，大概的意思是 Mobx 关注的是 store 到 state 的过程，React 关注的是 state 到 view 的过程）。