MobX 简易上手指南

本文不详细介绍 MobX 相关的所有内容，但已经可以覆盖开发中 99% 的场景。不讲其他内容是为了避免干扰我们的思路，需要更高阶内容可查看官方文档。

本文基于 MobX 4.x 来介绍

目录

• Mobx
• mobx-react

MobX

概念

简单来说，MobX 是状态管理工具。当应用状态更新时，任何源自应用状态的东西都将自动地获得。

Observable state 可观察状态

import { observable } from "mobx";

class Todo {
    id = Math.random();
    @observable title = "";
    @observable finished = false;
}

通过@observable注解来标记一个属性为可观察。底层是通过把该属性转化成getter/setter来实现的。虽然名字叫做可观察状态，但并不需要使用者主动观察（例如调用addListener），具体看下方介绍

Computed values 计算值

class TodoList {
    @observable todos = [];
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
}

如上 @computed 所示即为计算值，是相关状态变化时自动更新的值。计算值只有在被使用时才会自动更新。

Reactions 反应

前面提到可观察状态发生变化时，无需主动监听特定的可观察状态或计算值。这当中用到的就是Reactions 反应。反应使用特定的方法把使用到可观察状态的代码包裹起来。反应和计算值类似，在反应内部使用到的状态发生变化时，会自动重新运行。和计算值不同在于，计算值用于计算新值，不应该有副作用，而反应的目的是对外界做出影响，例如更新UI、发送网络请求、打印日志等。

反应的作用机制是，在执行入参中的方法时，通过可观察状态和计算值的 getter 搜集该反应的依赖，在依赖发生变化时，重新运行该反应中定义的方法。

@observer
class TodoView extends React.Component {
    render() {
        return <div>{this.props.todo.title}</div>
    }
}

上面例子中的组件经过@observer注解包装后，其render方法会被包裹进一个reaction中。在第一次render执行过后，其使用到的todo.title若发生变化，会重新执行render。

Actions 动作

如果每次修改一个可观察状态就重新运行一次反应，在某些场景下会显得过于频繁。动作这个概念可以理解为批量操作，或理解为事务。一个动作内部包含的多次对可观察状态的修改只会在动作执行完毕后，一次性重新计算计算值和执行反应。

action或@action可以把一个函数包装成动作，而@action.bound在action的语义之上添加了绑定this到当前对象中的功能。使用场景如：

class Ticker {
    @observable tick = 0

    @action.bound
    increment() {
        this.tick++ // 'this' 永远都是正确的
    }
}

const ticker = new Ticker()
setInterval(ticker.increment, 1000)

runInAction(fn)可以简单的认为是action(fn)()的语法糖。把参数 fn 包装成一个 action 后马上执行。

import { runInAction } from "mobx";
runInAction(() => {
    todos.push(new Todo());
    todos[0].finished = true;
})

使用动作的另外一个好处是明确表示其内部包含对可观察状态的修改，提醒开发者注意。

可以通过配置使项目中对状态的修改都限定在action中，方法如下：

import { configure } from "mobx";
configure({ enforceActions: true });

异步 actions 和 flows

@action 只会对当前运行的函数做出反应，对于一些不在当前函数中调用的回调是无效的，例如 setTimeout 回调、Promise 的 then 或 async 语句。这些回调如果修改了状态，也应该用 action 包裹起来。以下两种方法均可处理该问题：

1. 修改状态的语句用 runInAction 包裹起来
2. 使用 flow 函数。注意 flow 不能作为装饰器

class Store {
    @observable githubProjects = []
    @observable state = "pending" // "pending" / "done" / "error"

    @action
    async fetchProjects() {
        this.githubProjects = []
        this.state = "pending"
        try {
            const projects = await fetchGithubProjectsSomehow()
            const filteredProjects = somePreprocessing(projects)
            // await 之后，再次修改状态需要动作:
            runInAction(() => {
                this.state = "done"
                this.githubProjects = filteredProjects
            })
        } catch (error) {
            runInAction(() => {
                this.state = "error"
            })
        }
    }
}

关于flow的用法，由于涉及到generator，此处暂不介绍。

mobx-react

mobx-react是连接MobX和react的桥梁，主要是通过把render包裹在Reactions中，使得状态变化时能自动重新渲染。

observer

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

@observer
class TodoListView extends Component {
    render() {
        return (
            <div>
                <ul>
                    {this.props.todoList.todos.map(todo =>
                        <TodoView todo={todo} key={todo.id} />
                    )}
                </ul>
                Tasks left: {this.props.todoList.unfinishedTodoCount}
            </div>
        )
    }
}

const TodoView = observer(({todo}) =>
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            onClick={() => todo.finished = !todo.finished}
        />{todo.title}
    </li>
)

const store = new TodoList();
ReactDOM.render(<TodoListView todoList={store} />, document.getElementById('mount'));

如上所示，store是可观察状态，由于TodoListView和TodoView通过@observer或observer包裹起来，在状态发生变化时会自动更新UI。

类形式的Component多使用装饰器@observer，函数形式的Component多使用函数observer

Observer

由于每次 store 改变都需要重新执行 render 方法，若render方法太复杂或要渲染的东西太多，则可能会引起性能问题。对此，官方推荐的是使用大量的小组件并且使用独立的组件渲染列表。基于的原则是动静分离，使需要重新渲染的区域范围尽量少。

但每个小区域都需要写成一个组件的话显得太繁琐。<Observer> 组件就是为了减少模板代码而引入的。<Observer> 接受一个无参函数作为 children，该函数返回要渲染的内容。当其中的状态发生变化时，该函数会重新执行，更新UI。

class App extends React.Component {
    render() {
        return (
            <div>
                {/* 一大段内容 */}
                <Observer>{() => <div>{this.props.person.name}</div>}</Observer>
                {/* 一大段内容 */}
            </div>
        )
    }
}

const person = observable({ name: "John" })

React.render(<App person={person} />, document.body)
person.name = "Mike"

上面的例子中，当 person.name 发生变化时，只有 <Observer> 当中的内容会自动更新，外部的render函数不会重新执行。

一般情况下，使用 @observer 已经足够，当需要优化性能时再考虑使用 <Observer>。

贴士

不要拷贝 observables 属性并存储在本地

由于 mobx 是基于 getter 来搜集依赖的，所以在 reaction 中需要有 读取属性 的操作才能被记录下。以下是错误示范，因为 @observer 包装的组件，只有 render 方法被包装进 reaction 中：

class User {
  @observable name
}
@observer
class Profile extends React.Component {
  name
  componentWillMount() {
    // 错误的，这会间接引用 user.name 并只拷贝值一次！
    // 未来的更新不会被追踪，因为生命周期钩子不是响应的
    // 像这样的赋值会创建冗余数据
    this.name = this.props.user.name
  }
  render() {
    return <div>{this.name}</div>;
    // 应该使用
    // return <div>{this.props.user.name}</div>;
    // 或使用计算属性
  }
}

间接引用值尽可能晚的使用

@observer
class Profile extends React.Component {
  render() {
    // 不合适，若user.name被修改，则整个Profile组件会被重新render
    return (
        <div><Header name={this.props.user.name}/></div>
    );
    // 性能更优。传递user到Header，若user.name被修改，只有Header组件会被更新
    // return (
    //     <div><Header user={this.props.user}/></div>
    // );
  }
}

使用slice获取真正的数组

Observable 数组实际上是对象，在需要真正数组的场合可以使用 .slice() 方法。

进阶

需要更进一步了解 mobx 可参考官方文档

其中两个章节较为重要：

• 常见陷阱与最佳实践
• 优化 React 组件渲染