Mobx是以數(shù)據(jù)驅(qū)動(dòng)視圖茶凳,通過(guò)簡(jiǎn)單的數(shù)據(jù)綁定,我們只需要修改數(shù)據(jù)本身殃恒,便可自動(dòng)更新視圖
@observer
import React from 'react';
import {observer} from 'mobx';
import { View, Text } from 'react-native';
import Store from './Store.js';
@observer
class MobCounter extends React.Component{
constructor() {
this.store = new Store();
}
render(){
return(
<View>
<Text>{this.store.count}</Text>
<Text onPress={() => this.store.increase()}>自增</Text>
</View>
);
}
}
export default MobCounter;
定義一種數(shù)據(jù)邏輯的store
import {observable} from 'mobx';
class Store{
@observable count = 0;//添加observable屬性模蜡,賦予count可以被外部觀察的屬性
increase(){
this.count++;
}
}
export default Store;
@observer
給予組件響應(yīng)數(shù)據(jù)變更的能力
@observable
給予數(shù)據(jù)被外部觀察變更的特性
@computed
被@computed
修飾的變量可以基于其他可觀測(cè)的變量動(dòng)態(tài)計(jì)算出一個(gè)值,同時(shí)這個(gè)值也是可觀察的佑菩。
@observable first = 'hello';
@observable second = ' world';
@computed get all(){
return this.first + this.second;
}
改變first
或者second
的值盾沫,all的值也會(huì)隨之改變裁赠,并且這兩個(gè)變量都是可觀察的,任何觀察了這兩個(gè)變量的組件都會(huì)同步更新赴精。
autorun
autorun
接收一個(gè)函數(shù)作為參數(shù)组贺。autorun
會(huì)讀取函數(shù)內(nèi)部可觀察的屬性,并將此屬性與函數(shù)綁定祖娘,任何有關(guān)此屬性的變化失尖,都將會(huì)自動(dòng)執(zhí)行綁定的函數(shù)。
autorun(() => {
console.log(this.count);//count 是observable變量
});
以上介紹了Mobx的基本用法渐苏,更詳細(xì)的用法可查看 Mobx官網(wǎng)