本文考慮到篇幅問題,將《MobX 入門教程》分成上、下兩篇文章,方便閱讀。分配安排:
一、MobX 介紹
首先看下官網介紹:
★MobX 是一個經過戰火洗禮的庫,它通過透明的函數響應式編程(transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴展。MobX背後的哲學很簡單: 任何源自應用狀態的東西都應該自動地獲得。 其中包括UI、數據序列化、服務器通訊,等等。
”
核心重點就是:MobX 通過響應式編程實現簡單高效,可擴展的狀態管理。
React 和 Mobx 關係
React 和 MobX 相輔相成,相互合作。
官網介紹:
★React 通過提供機制把應用狀態轉換爲可渲染組件樹並對其進行渲染。而MobX提供機制來存儲和更新應用狀態供 React 使用。
”
Mobx 工作流程
這裏先了解下大概整理流程,接下來會結合代碼,介紹每一個部分。
本文概要
本文使用的是 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
的值也隨之發生改變。
注意:
知識點: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
做出改進;
它們各有特點,互爲補充,都能在合適場景中發揮重要作用。
回覆“加羣”與大佬們一起交流學習~