MobX 通過透明的函數(shù)響應式編程(transparently applying functional reactive programming - TFRP)使得狀態(tài)管理變得簡單和可擴展。
MobX背后的哲學很簡單:
任何源自應用狀態(tài)的東西都應該自動地獲得窗怒，其中包括UI映跟、數(shù)據(jù)序列化、服務器通訊扬虚，等等申窘。
flow.png
一、安裝
- 安裝:
npm install mobx --save
- 安裝React 綁定庫:
npm install mobx-react --save
- 安裝啟用 ESNext 的裝飾器-@ (可選)
npm i --save-dev babel-plugin-transform-decorators-legacy
然后在 .babelrc 文件中啟用它:
{
"presets": ["react-native"],
"plugins": ["transform-decorators-legacy"]
}
二孔轴、MobX 要點
-
Observable state(可觀察的狀態(tài))
MobX 為現(xiàn)有的數(shù)據(jù)結(jié)構(gòu)(如對象剃法，數(shù)組和類實例)添加了可觀察的功能。
通過使用 @observable 裝飾器(ES.Next)來給你的類屬性添加注解就可以簡單地完成這一切路鹰。
這些 @ 開頭的東西是ES.next裝飾器（可選）贷洲。
如果不支持裝飾器或字段初始化器，那么 @observable key = value; 會是 extendObservable(this, { key: value }) 的語法糖晋柱。
import { observable } from 'mobx';
@observable title = "observable";
-
Computed values(計算值)
在相關(guān)數(shù)據(jù)發(fā)生變化時自動更新的值优构。
- 可以在任意類屬性的 getter 上使用 @computed 裝飾器來聲明式的創(chuàng)建計算屬性。
import {observable, computed} from "mobx";
class Apple {
@observable price = 0;
@observable amount = 1;
constructor(price) {
this.price = price;
}
@computed get totalPrice() {
return this.price * this.amount;
}
}
- 可以為計算值定義 setter雁竞。注意這些 setters 不能用來直接改變計算屬性的值钦椭，但是它們可以用來作“逆向”衍生拧额。
class Foo {
@observable length = 2;
@computed get squared() {
return this.length * this.length;
}
set squared(value) { // 這是一個自動的動作，不需要注解
this.length = Math.sqrt(value);
}
}
*注意: 永遠在 getter 之后 定義 setter彪腔，一些 TypeScript 版本會知道聲明了兩個具有相同名稱的屬性侥锦。
*注意: setter 需要 MobX 2.5.1 或者更高版本
- 可以直接當做函數(shù)來調(diào)用，在返回的對象上使用 .get() 來獲取計算的當前值德挣，或者使用 .observe(callback) 來觀察值的改變恭垦。
import {observable, computed} from "mobx";
var name = observable("John");
var upperCaseName = computed(() =>
name.get().toUpperCase()
);
var disposer = upperCaseName.observe(change => console.log(change.newValue));
name.set("Dave");
// 輸出: 'DAVE'
-
Autorun
當使用 autorun 時，所提供的函數(shù)總是立即被觸發(fā)一次格嗅，然后每次它的依賴關(guān)系改變時會再次被觸發(fā)番挺。 -
observer
用來將 React 組件轉(zhuǎn)變成響應式組件。 它用 mobx.autorun 包裝了組件的 render 函數(shù)以確保任何組件渲染中使用的數(shù)據(jù)變化時都可以強制刷新組件屯掖。 observer 是由單獨的 mobx-react 包提供的玄柏。
import { observer } from 'mobx-react';
var timerData = observable({
secondsPassed: 0,
});
setInterval(() => {
timerData.secondsPassed++;
}, 1000);
@observer
class Timer extends React.Component {
render() {
return <Text>{timerData.secondsPassed}</Text>;
}
}
*注意，使用 @observer 裝飾器是可選的贴铜，它和 observer(class Timer ... { }) 達到的效果是一樣的粪摘。
-
action (動作)
用法:
action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
@action.bound(function() {})
任何應用都有動作。動作是任何用來修改狀態(tài)的東西阀湿。 使用MobX你可以在代碼中顯式地標記出動作所在的位置赶熟。 動作可以有助于更好的組織代碼瑰妄。
應該永遠只對修改狀態(tài)的函數(shù)使用動作陷嘴。 只執(zhí)行查找，過濾器等函數(shù)不應該被標記為動作
class Ticker {
@observable tick = 0
@action.bound
increment() {
this.tick++ // 'this' 永遠都是正確的
}
}
const ticker = new Ticker()
setInterval(ticker.increment, 1000)
