一、MobX 介紹
首先看下官網介紹:
MobX 是一個經過戰火洗禮的庫,它通過透明的函數響應式編程(transparently applying functional reactive programming - TFRP)使得狀態管理變得簡單和可擴展。MobX背後的哲學很簡單:
任何源自應用狀態的東西都應該自動地獲得。
其中包括UI、數據序列化、服務器通訊,等等。
核心重點就是:MobX 通過響應式編程實現簡單高效,可擴展的狀態管理。
<img src="http://images.pingan8787.com/...; width="120px"/>
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
的值也隨之發生改變。
注意:
一定在 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]
四、 Mobx-React 簡單實例
這裏以簡單計數器爲例,實現點擊按鈕,數值累加的簡單操作,如圖:
在這個案例中,我們引用 mobx-react
庫來實現,很明顯可以看出 mobx-react
是作爲 mobx
和 react
之前的橋樑。
它將 react
組件轉化爲對可觀察數據的反應,也就是將組件的 render
方法包裝成 autorun
方法,使得狀態變化時能自動重新渲染。
詳細可以查看:https://www.npmjs.com/package... 。
接下來開始我們的案例:
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 | 王平安 |
---|---|
[email protected] | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推薦 | https://github.com/pingan8787... |
ES小冊 | js.pingan8787.com |
微信公衆號