【MobX】MobX 簡單入門教程

時間 2019-11-05

標籤 MobX mobx 簡單入門教程简体版

原文原文鏈接

1、MobX 介紹

首先看下官網介紹：html

MobX 是一個通過戰火洗禮的庫，它經過透明的函數響應式編程(transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴展。MobX背後的哲學很簡單: 任何源自應用狀態的東西都應該自動地得到。其中包括UI、數據序列化、服務器通信，等等。node

核心重點就是：MobX 經過響應式編程實現簡單高效，可擴展的狀態管理。react

React 和 Mobx 關係

React 和 MobX 相輔相成，相互合做。webpack

官網介紹：git

React 經過提供機制把應用狀態轉換爲可渲染組件樹並對其進行渲染。而MobX提供機制來存儲和更新應用狀態供 React 使用。github

Mobx 工做流程

這裏先了解下大概整理流程，接下來會結合代碼，介紹每個部分。web

本文概要

本文使用的是 MobX 5 版本，主要將從如下幾個方面介紹 MobX 的使用：typescript

配置 Webpack 的 MobX 開發環境
MobX 經常使用 API 介紹（主要介紹與可觀察數據相關的操做）
MobX 簡單實例

2、配置 Webpack 的 MobX 開發環境

安裝 webpack 和 babel 依賴包：

cnpm i webpack webpack-cli babel-core babel-preset-env babel-loader -D
複製代碼

安裝 MobX 相關依賴包：

cnpm i mobx-react -D
cnpm i babel-plugin-transform-class-properties -D 
cnpm i babel-plugin-transform-decorators-legacy -D 
複製代碼

webpack.config.js 中添加配置：

注意：transform-decorators-legacy 必定放在第一個。shell

const path = require('path')

const config = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/index.js'),
    output: {
        path:  path.resolve(__dirname, 'dist'),
        filename: 'main.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: ['transform-decorators-legacy', 'transform-class-properties']
                }
            }
        }]
    },
    devtool: 'inline-source-map'
}

module.exports = config
複製代碼

3、MobX 經常使用 API 介紹

1. 設置可觀察數據（observable）

1.1 (@)observable

observable 是一種讓數據的變化能夠被觀察的方法，底層是經過把該屬性轉化成 getter / setter 來實現的。。express

observable 值能夠是 JS原始數據類型、引用類型、普通對象、類實例、數組和映射。

observable 使用

對於JS原始類型（Number/String/Boolean），使用observable.box()方法設置:

const num = observable.box(99)
const str = observable.box('leo')
const bool = observable.box(true)

// 獲取原始值 get()
console.log(num.get(),str.get(),bool.get())   // 99 "leo" true

// 修改原始值 set(params)
num.set(100);
str.set('pingan');
bool.set(false);
console.log(num.get(),str.get(),bool.get())  // 100 "pingan" false
複製代碼

對於數組、對象類型，使用 observable() 方法設置：

const list = observable([1, 2, 4]);
list[2] = 3;
list.push(5) // 能夠調用數組方法
console.log(list[0], list[1], list[2], list[3]) // 1 2 3 5

const obj = observable({a: '11', b: '22'})
console.log(obj.a, obj.b) // 11 22
obj.a = "leo";
console.log(obj.a, obj.b) // leo 22
複製代碼

須要注意的是：應該避免下標越界去方法數組中的值，這樣的數據將不會被 MobX 所監視：

const list = observable([1, 2, 4]);
// 錯誤
console.log(list[9]) // undefined
複製代碼

所以在實際開發中，須要注意數組長度的判斷。

對於映射（Map）類型，使用 observable.map() 方法設置：

const map = observable.map({ key: "value"});
map.set("key", "new value");
console.log(map.has('key'))  // true
map.delete("key");
console.log(map.has('key'))  // false
複製代碼

@observable 使用

MobX 也提供使用裝飾器 @observable 來將其轉換成可觀察的，可使用在實例的字段和屬性上。

import {observable} from "mobx";

class Leo {
    @observable arr = [1];
    @observable obj = {};
    @observable map = new Map();
    @observable str = 'leo';
    @observable num = 100;
    @observable bool = false;
}
let leo = new Leo()
console.log(leo.arr[0]) // 1
複製代碼

相比於前面使用 observable.box()方法對JS原始類型（Number/String/Boolean）進行定義，裝飾器 @observable 則能夠直接定義這些類型。

緣由是裝飾器 @observable 更進一步封裝了 observable.box()。

2. 響應可觀察數據的變化

2.1 (@)computed

計算值(computed values)是能夠根據現有的狀態或其它計算值進行組合計算的值。可使實際可修改的狀態儘量的小。

此外計算值仍是高度優化過的，因此儘量的多使用它們。

能夠簡單理解爲：它是相關狀態變化時自動更新的值，能夠將多個可觀察數據合併成一個可觀察數據，而且只有在被使用時纔會自動更新。

知識點：使用方式

使用方式1：聲明式建立

import {observable, computed} from "mobx";

class Money {
    @observable price = 0;
    @observable amount = 2;

    constructor(price = 1) {
        this.price = price;
    }

    @computed get total() {
        return this.price * this.amount;
    }
}
let m = new Money()

console.log(m.total) // 2
m.price = 10;
console.log(m.total) // 20
複製代碼

使用方式2：使用 decorate 引入

import {decorate, observable, computed} from "mobx";

class Money {
    price = 0;
    amount = 2;
    constructor(price = 1) {
        this.price = price;
    }

    get total() {
        return this.price * this.amount;
    }
}
decorate(Money, {
    price: observable,
    amount: observable,
    total: computed
})

let m = new Money()

console.log(m.total) // 2
m.price = 10;
console.log(m.total) // 20
複製代碼

使用方式3：使用 observable.object 建立

observable.object 和 extendObservable 都會自動將 getter 屬性推導成計算屬性，因此下面這樣就足夠了:

import {observable} from "mobx";

const Money = observable.object({
    price: 0,
    amount: 1,
    get total() {
        return this.price * this.amount
    }
})

console.log(Money.total) // 0
Money.price = 10;
console.log(Money.total) // 10
複製代碼

注意點

若是任何影響計算值的值發生變化了，計算值將根據狀態自動進行變化。

若是前一個計算中使用的數據沒有更改，計算屬性將不會從新運行。若是某個其它計算屬性或 reaction 未使用該計算屬性，也不會從新運行。在這種狀況下，它將被暫停。

知識點：computed 的 setter

computed 的 setter 不能用來改變計算屬性的值，而是用來它裏面的成員，來使得 computed 發生變化。

這裏咱們使用 computed 的第一種聲明方式爲例，其餘幾種方式實現起來相似：

import {observable, computed} from "mobx";

class Money {
    @observable price = 0;
    @observable amount = 2;

    constructor(price = 1) {
        this.price = price;
    }

    @computed get total() {
        return this.price * this.amount;
    }

    set total(n){
        this.price = n + 1
    }
}

let m = new Money()

console.log(m.total) // 2
m.price = 10;
console.log(m.total) // 20
m.total = 6;
console.log(m.total) // 14
複製代碼

從上面實現方式能夠看出，set total 方法中接收一個參數 n 做爲 price 的新值，咱們調用 m.total 後設置了新的 price，因而 m.total 的值也隨之發生改變。

注意：
必定在 geeter 以後定義 setter，一些 typescript 版本會認爲聲明瞭兩個名稱相同的屬性。

知識點：computed(expression) 函數

通常能夠經過下面兩種方法觀察變化，並獲取計算值：

方法1：將 computed 做爲函數調用，在返回的對象使用 .get() 來獲取計算的當前值。
方法2：使用 observe(callback) 來觀察值的改變，其計算後的值在 .newValue 上。

import {observable, computed} from "mobx";

let leo = observable.box('hello');
let upperCaseName = computed(() => leo.get().toUpperCase())
let disposer = upperCaseName.observe(change => console.log(change.newValue))
leo.set('pingan')
複製代碼

更詳細的 computed 參數能夠查看文檔：《Computed 選項》。

知識點：錯誤處理

計算值在計算期間拋出異常，則此異常會被捕獲，並在讀取其值的時候拋出異常。

拋出異常不會中斷跟蹤，全部計算值能夠從異常中恢復。

import {observable, computed} from "mobx";
let x = observable.box(10)
let y = observable.box(2)
let div = computed(() => {
    if(y.get() === 0) throw new Error('y 爲0了')
    return x.get() / y.get()
})

div.get() // 5
y.set(0)  // ok
div.get() // 報錯，y 爲0了

y.set(5)
div.get() // 恢復正常，返回 2
複製代碼

小結

用法：

computed(() => expression)
computed(() => expression, (newValue) => void)
computed(() => expression, options)
@computed({equals: compareFn}) get classProperty() { return expression; }
@computed get classProperty() { return expression; }

還有各類選項能夠控制 computed 的行爲。包括:

equals: (value, value) => boolean 用來重載默認檢測規則的比較函數。內置比較器有: comparer.identity, comparer.default, comparer.structural；
requiresReaction: boolean 在從新計算衍生屬性以前，等待追蹤的 observables 值發生變化；
get: () => value) 重載計算屬性的 getter；
set: (value) => void 重載計算屬性的 setter；
keepAlive: boolean 設置爲 true 以自動保持計算值活動，而不是在沒有觀察者時暫停；

2.2 autorun

概念

autorun 直譯就是自動運行的意思，那麼咱們要知道這兩個問題：

自動運行什麼？

即：自動運行傳入 autorun 的參數函數。

import { observable, autorun } from 'mobx'
class Store {
    @observable str = 'leo';
    @observable num = 123;
}

let store = new Store()
autorun(() => {
    console.log(`${store.str}--${store.num}`)
})
// leo--123
複製代碼

能夠看出 autorun 自動被運行一次，並輸出 leo--123 的值，顯然這還不是自動運行。

怎麼觸發自動運行？

當修改 autorun 中任意一個可觀察數據便可觸發自動運行。

// 緊接上部分代碼

store.str = 'pingan'

// leo--123
// pingan--123
複製代碼

如今能夠看到控制檯輸出這兩個日誌，證實 autorun 已經被執行兩次。

知識點：觀察 computed 的數據

import { observable, autorun } from 'mobx'
class Store {
    @observable str = 'leo';
    @observable num = 123;

    @computed get all(){
        return `${store.str}--${store.num}`
    }
}

let store = new Store()
autorun(() => {
    console.log(store.all)
})
store.str = 'pingan'

// leo--123
// pingan--123
複製代碼

能夠看出，這樣將 computed 的值在 autorun 中進行觀察，也是能夠達到同樣的效果，這也是咱們實際開發中經常使用到的。

知識點：computed 與 autorun 區別

相同點：

都是響應式調用的表達式；

不一樣點：

@computed 用於響應式的產生一個能夠被其餘 observer 使用的值；
autorun 不產生新的值，而是達到一個效果（如：打印日誌，發起網絡請求等命令式的反作用）；
@computed中，若是一個計算值再也不被觀察了，MobX 能夠自動地將其垃圾回收，而 autorun 中的值必需要手動清理才行。

小結

autorun 默認會執行一次，以獲取哪些可觀察數據被引用。

autorun 的做用是在可觀察數據被修改以後，自動去執行依賴可觀察數據的行爲，這個行爲一直就是傳入 autorun 的函數。

2.3 when

接收兩個函數參數，第一個函數必須根據可觀察數據來返回一個布爾值，當該布爾值爲 true 時，纔會去執行第二個函數，而且只會執行一次。

import { observable, when } from 'mobx'
class Leo {
    @observable str = 'leo';
    @observable num = 123;
    @observable bool = false;
}

let leo = new Leo()
when(() => leo.bool, () => {
    console.log('這是true')
})
leo.bool = true
// 這是true
複製代碼

能夠看出當 leo.bool 設置成 true 之後，when 的第二個方法便執行了。

注意

第一個參數，必須是根據可觀察數據來返回的布爾值，而不是普通變量的布爾值。
若是第一個參數默認值爲 true，則 when 函數會默認執行一次。

2.4 reaction

接收兩個函數參數，第一個函數引用可觀察數據，並返回一個可觀察數據，做爲第二個函數的參數。

reaction 第一次渲染的時候，會先執行一次第一個函數，這樣 MobX 就會知道哪些可觀察數據被引用了。隨後在這些數據被修改的時候，執行第二個函數。

import { observable, reaction } from 'mobx'
class Leo {
    @observable str = 'leo';
    @observable num = 123;
    @observable bool = false;
}

let leo = new Leo()
reaction(() => [leo.str, leo.num], arr => {
    console.log(arr)
})
leo.str = 'pingan'
leo.num = 122
// ["pingan", 122]
// ["pingan", 122]
複製代碼

這裏咱們依次修改 leo.str 和 leo.num 兩個變量，會發現 reaction 方法被執行兩次，在控制檯輸出兩次結果 ["pingan", 122] ，由於可觀察數據 str 和 num 分別被修改了一次。

實際使用場景：

當咱們沒有獲取到數據的時候，沒有必要去執行存緩存邏輯，當第一次獲取到數據之後，就執行存緩存的邏輯。

2.5 小結

computed 能夠將多個可觀察數據組合成一個可觀察數據；
autorun 能夠自動追蹤所引用的可觀察數據，並在數據發生變化時自動觸發；
when 能夠設置自動觸發變化的時機，是 autorun 的一個變種狀況；
reaction 能夠經過分離可觀察數據聲明，以反作用的方式對 autorun 作出改進；

它們各有特色，互爲補充，都能在合適場景中發揮重要做用。

3. 修改可觀察數據

在上一部份內容中，咱們瞭解到，對可觀察的數據作出反應的時候，須要咱們手動修改可觀察數據的值。這種修改是經過直接向變量賦值來實現的，雖然簡單易懂，可是這樣會帶來一個較爲嚴重的反作用，就是每次的修改都會觸發 autorun 或者 reaction 運行一次。多數狀況下，這種高頻的觸發是徹底沒有必要的。

好比用戶對視圖的一次點擊操做須要不少修改 N 個狀態變量，可是視圖的更新只須要一次就夠了。

爲了優化這個問題， MobX 引入了 action 。

3.1 (@)action

action 是修改任何狀態的行爲，使用 action 的好處是能將屢次修改可觀察狀態合併成一次，從而減小觸發 autorun 或者 reaction 的次數。

能夠理解成批量操做，即一次動做中包含屢次修改可觀察狀態，此時只會在動做結束後，作一次性從新計算和反應。

action 也有兩種使用方法，這裏以 decorate 方式來介紹。

import { observable, computed, reaction, action} from 'mobx'

class Store {
    @observable string = 'leo';
    @observable number = 123;
    @action bar(){
        this.string = 'pingan'
        this.number = 100
    }
}
let store = new Store()
reaction(() => [store.string, store.number], arr => {
    console.log(arr)
})
store.bar() // ["pingan", 100]
複製代碼

當咱們連續去修改 store.string 和 store.number 兩個變量後，再運行 store.bar() 會發現，控制檯值輸出一次 ["pingan", 100] ，這就說明 reaction 只被執行一次。

知識點：action.bound

另外 action 還有一種特殊使用方法：action.bound，經常用來做爲一個 callback 的方法參數，而且執行效果也是同樣：

import { observable, computed, reaction, action} from 'mobx'

class Store {
    @observable string = 'leo';
    @observable number = 123;
    @action.bound bar(){
        this.string = 'pingan'
        this.number = 100
    }
}
let store = new Store()
reaction(() => [store.string, store.number], arr => {
    console.log(arr)
})
let bar = store.bar;
function foo(fun){
    fun()
}
foo(bar) //["pingan", 100]
複製代碼

知識點：runInAction(name?, thunk)

runInAction 是個簡單的工具函數，它接收代碼塊並在(異步的)動做中執行。這對於即時建立和執行動做很是有用，例如在異步過程中。runInAction(f) 是 action(f)() 的語法糖。

import { observable, computed, reaction, action} from 'mobx'
class Store {
    @observable string = 'leo';
    @observable number = 123;
    @action.bound bar(){
        this.string = 'pingan'
        this.number = 100
    }
}
let store = new Store()
reaction(() => [store.string, store.number], arr => {
    console.log(arr)
})
runInAction(() => {
    store.string = 'pingan'
    store.number = 100
})//["pingan", 100]
複製代碼

4、 Mobx-React 簡單實例

這裏以簡單計數器爲例，實現點擊按鈕，數值累加的簡單操做，如圖：

在這個案例中，咱們引用 mobx-react 庫來實現，很明顯能夠看出 mobx-react 是做爲 mobx 和 react 以前的橋樑。

它將 react 組件轉化爲對可觀察數據的反應，也就是將組件的 render 方法包裝成 autorun 方法，使得狀態變化時能自動從新渲染。

詳細能夠查看：www.npmjs.com/package/mob… 。

接下來開始咱們的案例：

1. 安裝依賴和配置webpack

因爲配置和前面第二節介紹差很少，因此這裏會以第二節的配置爲基礎，添加配置。

首先安裝 mobx-react 依賴：

cnpm i mobx-react -D
複製代碼

修改webpack.config.js，在 presets 配置中添加 react 進來：

// ... 省略其餘
- entry: path.resolve(__dirname, 'src/index.js'),
+ entry: path.resolve(__dirname, 'src/index.jsx'),
module: {
    rules: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader',
            options: {
- presets: ['env'],
+ presets: ['env', 'react'],
                plugins: ['transform-decorators-legacy', 'transform-class-properties']
            }
        }
    }]
},
複製代碼

2. 初始化 React 項目

這裏初始化一下咱們本次項目的簡單骨架：

// index.jsx
import { observable, action} from 'mobx';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {observer, PropTypes as observablePropTypes} from 'mobx-react'

class Store {
    
}

const store = new Store();

class Bar extends Component{

}

class Foo extends Component{
    
}

ReactDOM.render(<Foo />, document.querySelector("#root")) 複製代碼

這些組件對應到咱們最後頁面效果如圖：

2. 實現 Store 類

Store 類用於存儲數據。

class Store {
    @observable cache = { queue: [] }
    @action.bound refresh(){
        this.cache.queue.push(1)
    }
}
複製代碼

3. 實現 Bar 和 Foo 組件

實現代碼以下:

@observer
class Bar extends Component{
    static propTypes = {
        queue: observablePropTypes.observableArray
    }
    render(){
        const queue = this.props.queue;
        return <span>{queue.length}</span>
    }
}

class Foo extends Component{
    static propTypes = {
        cache: observablePropTypes.observableObject
    }
    render(){
        const cache = this.props.cache;
        return <div><button onClick={this.props.refresh}>點擊 + 1</button> 當前數值：<Bar queue={cache.queue} /></div> } } 複製代碼

這裏須要注意：

可觀察數據類型中的數組，實際上並非數組類型，這裏須要用 observablePropTypes.observableArray 去聲明它的類型，對象也是同樣。
@observer 在須要根據數據變換，而改變UI的組件去引用，另外建議有使用到相關數據的類都引用。
事實上，咱們只須要記住 observer 方法，將全部 React 組件用 observer 修飾，就是 react-mobx 的用法。

4. 使用 Foo 組件

最後咱們使用 Foo 組件，須要給它傳遞兩個參數，這樣 Bar 組件才能拿到並使用：

ReactDOM.render(
    <Foo cache={store.cache} refresh={store.refresh}/>, document.querySelector("#root") ) 複製代碼

結尾

本文參考：

關於我

本文首發在 pingan8787我的博客，如需轉載請保留我的介紹。

Author	王平安
E-mail	pingan8787@qq.com
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	github.com/pingan8787/…
ES小冊	js.pingan8787.com

微信公衆號

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。