Mobx, 化繁爲簡的藝術

Using mobx to Saving Your Life...

在開發中大型應用的時候,與 React 配合使用的數據狀態管理庫除了有 Redux, 咱們還有了新選擇 -- Mobx, Mobx 是一款提供函數響應式編程的數據狀態管理庫, 相比於 Redux 的複雜而沉重, 它有着更簡單的接口與更少的概念, 只需較少的代碼, 便可把數據有效管理起來.

核心思想:

使用觀察者模式監控數據的變化，當數據變化時，自動更新/渲染視圖

原理:

1. 創建數據倉庫(store)與頁面(view)之間的綁定關係:

   store ---> subscribe ---> view

2. 當數據變化時, 自動根據新數據從新渲染頁面(re-render)

   subscribe(store) ---> exchange-info ---> re-render(view)

核心概念:

• observable

定義:
字面意義上理解是可觀察的，表明被觀察的數據源，經過這個方法，將咱們的數據源包裹，返回一個能夠由 mobx 自動監測的數據源對象

import { observable } from 'mobx';

class DataSource {
  @observable num = 0;
}

export default DataSource;

在這裏咱們作了兩件事情:
引入 observable 這個方法
定義 DataSource 類,經過 observable 將 DataSource 的 num 屬性包裝成被觀測的數據源

• observer

定義:
字面含義是 觀察者, 用來監測數據源變化，當使用 observer 訂閱數據源後，會根據數據源的變化來自動渲染新視圖

import React from 'react';
import { observer } from 'mobx-react';
import DataSource from './DataSource'; // 1.引入數據源的類
const dataStore = new DataSource();    // 2.實例化數據倉庫 (data store)

@observer                              // 3.使用裝飾器包裝後面的App類,使其可使用data store裏的數據
export default class App extends React.Component {
    render() {
      return (
        <div>{ dataStore.num }</div>     // 4.經過 @observer 包裹後的組件監測 dataStore 中的 num 數據
      );
    }
}

在這裏經過 @observer 把 App 組件改形成了觀察者，並觀測實例化的數據對象後，咱們就輕鬆不少了，由於 mobx 會在 dataStore 中的 num 變化時 自動從新渲染視圖,
那如何作到手動改動數據，或是作異步請求來改變數據呢?

• action

定義: 使用 action (動做) 來定義數據倉庫中改變數據源的方法
那咱們就把 observable 中的例子改爲這個樣子:

import { observable, action } from 'mobx';
class DataSource {
  @observable num = 0;
  @action add = () => {                // 使用 @action 裝飾 add 這個方法, 當咱們調用 add 的時候
   this.num++;                        // DataSource 中的 num 值就會自增1了
 }
}
export default DataSource;

而後, 把 observer 中的例子改爲這個樣子:

import React from 'react';
import { observer } from 'mobx-react';
import DataSource from './DataSource';  // 1.引入數據源的類
const dataStore = new DataSource();     // 2.實例化數據源 (data store)

@observer                               // 3.使用裝飾器包裝 App 組件, 使其可使用 dataStore 中的數據
export default class App extends React.Component {
    render() {
        return (
            <div>{ dataStore.num }</div>                 // 4. 綁定 num 數據
            <button onClick={ dataStore.add }></button>  // 5. 綁定 add 方法
        );  
    }
}

在視圖中綁定這個方法後, 當咱們點擊的時, 就能觸發 dataStore 的數據變化了
可是業務中常常用的 異步請求呢，怎麼寫?

import axios from 'axios';                // 1. 引入 http 庫

@action requestData = async() => {        // 2. 使用 @action 包裝異步函數
    const data = await axios.request({    
        method: 'GET',
        url: 'https://www.baidu.com'
    });
    this.num = data;
}

// view層
加一個button
<button onClick={ dataStore.requestData }></button>  // 3. 添加 requestData 方法

加上 requestData 方法後，點擊按鈕，神奇的事情出現了，視圖中的數字自動變化成了咱們請求回來的結果!!

What's the diffenrece?
相比於 Redux 從 View -> Mutation -> Action -> Reducer -> Store 的鏈路, Mobx 只須要從 @observer 到 @observable,
在節省大量開發 Mutation/Action/Reducer 的代碼的同時, 也減小了出錯的機率與調試的成本.
即然 redux 能作的 mobx 也能作，同時還能節省開發成本，何樂而不爲呢，快來體驗一下化繁爲簡的快樂吧.

Mobx, 化繁爲簡的藝術, 愉快的初次體驗