摘要：是一個的簡單可擴展的狀態管理庫。它的副作用是自動更新。該函數返回一個值，當返回值為的時候，才會繼續觸發第一個函數。當返回值為時，不再繼續監聽。包含一個，該值用來區分執行事件的類型。

使用 react 寫小型應用，數據、業務邏輯和視圖的模塊劃分不是很細是沒有問題的。在這個階段，引入任何狀態管理庫，都算是奢侈的。但是隨著頁面邏輯的復雜度提升，在中大型應用中，數據、業務邏輯和視圖，如果不能很好的劃分，就很有可能出現維護難、性能低下的問題。

業內比較成熟的解決方案有 redux，但是 redux 使用過程中，給我的感覺是太復雜和繁瑣。那么為什么不簡單一點呢？mobx 的核心理念是 簡單、可擴展的狀態管理庫。這可能正是你想要的。

react 關注的狀態(state)到視圖(view)的問題。而 mobx 關注的是狀態倉庫（store）到的狀態(state)的問題。

mobx 最最核心的概念只有2個。 @observable 和 @observer ，它們分別對應的是被觀察者和觀察者。這是大家常見的觀察者模式，不過這里使用了，ES7 中的 裝飾器。

使用 @observable 可以觀察類的值。

這里使用 @observable 將 Store 的 todos 變為一個被觀察的值。

倉庫

// 這里引入的是 mobx
import {observable} from "mobx";

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

mobx 組件

然后再使用 @observer ，將組件變為觀察者，響應 todos 狀態變化。
當狀態變化時，組件也會做相應的更新。

// 這里引入的是 mobx-react
import {observer} from "mobx-react";

@observer
class TodoBox extends Component  {
  render() {
    return (
      

        {this.props.store.todos.map(todo => 
{todo.title}
)}
      
    )
  }
}

完整的 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 (
      

        {this.props.store.todos.map(todo => 
{todo.title}
)}
      
    )
  }
}


const store = new Store();

render(
  ,
  document.getElementById("root")
);

通過以上的簡單的例子，展現了 mobx 分離數據、視圖的能力。

這一小節要介紹的兩個概念雖然也是核心概念，但是是可選的。

前面例子，只講了狀態的讀取，那么狀態應該如何寫入呢？

答案是直接寫入！

@observer
class TodoBox extends Component  {
  render() {
    return (
      

        

          {this.props.store.todos.map(
            (todo,index) => 
{todo.title}
          )}
        
        

           {
            // 直接修改倉庫中的狀態值
            this.props.store.todos[0].title = "修改后的todo標題"
          }} value="點我"/>
        
      
    )
  }
}

細心的朋友一定發現了奇怪的地方，react 官方說過 props 值不能直接修改，但是引入 mobx 后 props 可以直接修改了，這太奇怪了！

解決辦法就是 mobx 的下一個概念 action。

首先在 Store 中，定義一個 action。

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

在 Component 中調用，這樣通過 action 的方法，就避免了直接修改 props 的問題。

 {
  this.props.store.changeTodoTitle({index:0,title:"修改后的todo標題"});
}} value="點我"/>

可以通過引入 mobx 定義的嚴格模式，強制使用 action 來修改狀態。

import {useStrict} from "mobx";

useStrict(true);

在有些時候，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 (
      

        

          { /* 把 unfinishedTodos 換成 todos，點擊修改標題就會在控制臺打印 "render".*/ }
          {this.props.store.unfinishedTodos.map(
            (todo,index) => 
{todo.title}
          )}
        
        

           {
            this.props.store.changeTodoTitle({index:0,title:"修改后的todo標題"});
          }} value="修改標題"/>
        
      
    )
  }
}

const store = new Store();

render(
  ,
  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 的過程）。

在實際開發中，需要用到不少 mobx 的輔助函數，這些輔助函數一共 14 個，挑了一些列舉如下。

autorun
observable 的值初始化或改變時，自動運行。

trasaction
批量改變時，通過 trasaction 包裝，只會觸發一次 autorun。

extendsObservable
對類的屬性或實例，進行監聽。

observable
對普通對象進行監聽。

map
使用 asMap 將對象轉化為 map。

action-strict
在 mobx.usrStrict(true)時，只能通過 action 觸發值的改變。

when
類似 autorun.

mobx.when 第一個參數是一個函數，初始化時也會自動執行。該函數返回一個 boolean 值，當返回值為 true 的時候，才會繼續觸發第一個函數。當返回值為 flase 時，不再繼續監聽。這時會執行 mobx.when 的第二個參數，這個參數也是一個函數。

reaction
類似 autorun.

reaction 不會在初始化時執行，只會在值改變的時候執行。

該函數有 2 個值，第一個參數是一個函數，返回監聽的值.
第二個參數，也是一個函數，會在值改變的時候執行。

spy
類似 aoturun.

監聽所有 mobx 的事件。

包含一個 type ，該值用來區分執行事件的類型。

whyRun
用于調試，打印 autorun 為什么會觸發。