點擊上方“前端自習課”關注，學習起來~

本文考慮到篇幅問題，將《MobX 入門教程》分成上、下兩篇文章，方便閱讀。分配安排：

一、MobX 介紹

首先看下官網介紹：

★

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

”

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

React 和 Mobx 關系

React 和 MobX 相輔相成，相互合作。

官網介紹：

★

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

”

Mobx 工作流程

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

2019102303.png

本文概要

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

配置 Webpack 的 MobX 開發環境

MobX 常用 API 介紹（主要介紹與可觀察數據相關的操作）

MobX 簡單實例

二、配置 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 一定放在第一個。

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

三、MobX 常用 API 介紹

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

1.1 (@)observable

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

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 做出改進；

它們各有特點，互為補充，都能在合適場景中發揮重要作用。

---

▼原創系列推薦▼1. JavaScript 重溫系列（22篇全）
2. ECMAScript 重溫系列（10篇全）
3. JavaScript設計模式 重溫系列（9篇全）
4.?正則 / 框架 / 算法等 重溫系列（16篇全）5.?Webpack4 入門手冊（共 18 章）（上）6.?Webpack4 入門手冊（共 18 章）（下）7.?59篇原創系列匯總

回復“加群”與大佬們一起交流學習~

點這，與大家一起分享本文吧~

總結

以上是生活随笔為你收集整理的【MobX】390- MobX 入门教程（上）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。