国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

mobx學(xué)習(xí)總結(jié)

roundstones / 957人閱讀

摘要:原理分析的核心就是通過觀察某一個(gè)變量,當(dāng)該變量產(chǎn)生變化時(shí),對(duì)應(yīng)的內(nèi)的回調(diào)函數(shù)就會(huì)發(fā)生變化。回調(diào)函數(shù)若依賴外部環(huán)境,則無法進(jìn)行收集很好理解,的回調(diào)函數(shù)在預(yù)執(zhí)行的時(shí)候無法到達(dá)那一行代碼,所以收集不到。

Mobx解決的問題

傳統(tǒng)React使用的數(shù)據(jù)管理庫(kù)為Redux。Redux要解決的問題是統(tǒng)一數(shù)據(jù)流,數(shù)據(jù)流完全可控并可追蹤。要實(shí)現(xiàn)該目標(biāo),便需要進(jìn)行相關(guān)的約束。Redux由此引出了dispatch action reducer等概念,對(duì)state的概念進(jìn)行強(qiáng)約束。然而對(duì)于一些項(xiàng)目來說,太過強(qiáng),便失去了靈活性。Mobx便是來填補(bǔ)此空缺的。

這里對(duì)Redux和Mobx進(jìn)行簡(jiǎn)單的對(duì)比:

1. Redux的編程范式是函數(shù)式的而Mobx是面向?qū)ο蟮模?/p>

2. 因此數(shù)據(jù)上來說Redux理想的是immutable的,每次都返回一個(gè)新的數(shù)據(jù),而Mobx從始至終都是一份引用。因此Redux是支持?jǐn)?shù)據(jù)回溯的;

3. 然而和Redux相比,使用Mobx的組件可以做到精確更新,這一點(diǎn)得益于Mobx的observable;對(duì)應(yīng)的,Redux是用dispath進(jìn)行廣播,通過Provider和connect來比對(duì)前后差別控制更新粒度,有時(shí)需要自己寫SCU;Mobx更加精細(xì)一點(diǎn)。

?Mobx核心概念

Mobx的核心原理是通過action觸發(fā)state的變化,進(jìn)而觸發(fā)state的衍生對(duì)象(computed value & Reactions)。

State

在Mobx中,State就對(duì)應(yīng)業(yè)務(wù)的最原始狀態(tài),通過observable方法,可以使這些狀態(tài)變得可觀察。

通常支持被observable的類型有三個(gè),分別是Object, Array, Map;對(duì)于原始類型,可以使用Obserable.box。

值得注意的一點(diǎn)是,當(dāng)某一數(shù)據(jù)被observable包裝后,他返回的其實(shí)是被observable包裝后的類型。

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray));
console.log("ob:", obArray);

控制臺(tái)輸出為:

ob is Array: false
ob: ObservableArray {}

對(duì)于該問題,解決方法也很簡(jiǎn)單,可以通過Mobx原始提供的observable.toJS()轉(zhuǎn)換成JS再判斷,或者直接使用Mobx原生提供的APIisObservableArray進(jìn)行判斷。

computed

Mobx中state的設(shè)計(jì)原則和redux有一點(diǎn)是相同的,那就是盡可能保證state足夠小,足夠原子。這樣設(shè)計(jì)的原則不言而喻,無論是維護(hù)性還是性能。那么對(duì)于依賴state的數(shù)據(jù)而衍生出的數(shù)據(jù),可以使用computed。

簡(jiǎn)而言之,你有一個(gè)值,該值的結(jié)果依賴于state,并且該值也需要被obserable,那么就使用computed。

通常應(yīng)該盡可能的使用計(jì)算屬性,并且由于其函數(shù)式的特點(diǎn),可以最大化優(yōu)化性能。如果計(jì)算屬性依賴的state沒改變,或者該計(jì)算值沒有被其他計(jì)算值或響應(yīng)(reaction)使用,computed便不會(huì)運(yùn)行。在這種情況下,computed處于暫停狀態(tài),此時(shí)若該計(jì)算屬性不再被observable。那么其便會(huì)被Mobx垃圾回收。

簡(jiǎn)單介紹computed的一個(gè)使用場(chǎng)景

假如你觀察了一個(gè)數(shù)組,你想根據(jù)數(shù)組的長(zhǎng)度變化作出反應(yīng),在不使用computed時(shí)代碼是這樣的

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 輸出 "3"
numbers.push(4);
// 輸出 "4"
numbers[0] = 0;
// 輸出 "4"

最后一行其實(shí)只是改了數(shù)組中的一個(gè)值,但是也觸發(fā)了autorun的執(zhí)行。此時(shí)如果用computed便會(huì)解決該問題。

const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 輸出 "3"
numbers.push(4);
// 輸出 "4"
numbers[0] = 1;
autorun

另一個(gè)響應(yīng)state的api便是autorun。和computed類似,每當(dāng)依賴的值改變時(shí),其都會(huì)改變。不同的是,autorun沒有了computed的優(yōu)化(當(dāng)然,依賴值未改變的情況下也不會(huì)重新運(yùn)行,但不會(huì)被自動(dòng)回收)。因此在使用場(chǎng)景來說,autorun通常用來執(zhí)行一些有副作用的。例如打印日志,更新UI等等。

action

在redux中,唯一可以更改state的途徑便是dispatch一個(gè)action。這種約束性帶來的一個(gè)好處是可維護(hù)性。整個(gè)state只要改變必定是通過action觸發(fā)的,對(duì)此只要找到reducer中對(duì)應(yīng)的action便能找到影響數(shù)據(jù)改變的原因。強(qiáng)約束性是好的,但是Redux要達(dá)到約束性的目的,似乎要寫許多樣板代碼,雖說有許多庫(kù)都在解決該問題,然而Mobx從根本上來說會(huì)更加優(yōu)雅。

首先Mobx并不強(qiáng)制所有state的改變必須通過action來改變,這主要適用于一些較小的項(xiàng)目。對(duì)于較大型的,需要多人合作的項(xiàng)目來說,可以使用Mobx提供的api configure來強(qiáng)制。

Mobx.configure({enforceActions: true})

其原理也很簡(jiǎn)單

function?configure(options){

? ? if (options.enforceActions !== undefined) {
??????? globalState.enforceActions = !!options.enforceActions
??????? globalState.allowStateChanges = !options.enforceActions
??? }

}

通過改變?nèi)值膕trictMode以及allowStateChanges屬性的方式來實(shí)現(xiàn)強(qiáng)制使用action。

Mobx異步處理

和Redux不同的是,Mobx在異步處理上并不復(fù)雜,不需要引入額外的類似redux-thunkredux-saga這樣的庫(kù)。

唯一需要注意的是,在嚴(yán)格模式下,對(duì)于異步action里的回調(diào),若該回調(diào)也要修改observable的值,那么

該回調(diào)也需要綁定action。

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
? @observable a = 123;

? @action
? changeA() {
??? this.a = 0;
??? setTimeout(this.changeB, 1000);
? }
? @action.bound
? changeB() {
??? this.a = 1000;
? }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

這里用了action.bound語(yǔ)法糖,目的是為了解決javascript作用域問題。

另外一種更簡(jiǎn)單的寫法是直接包裝action

const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
? @observable a = 123;
? @action
? changeA() {
??? this.a = 0;
??? setTimeout(action("changeB",()=>{
????? this.a = 1000;
??? }), 1000);
? }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到處寫action,可以使用Mobx提供的工具函數(shù)runInAction來簡(jiǎn)化操作。

...

?@action
? changeA() {
??? this.a = 0;
??? setTimeout(
????? runInAction(() => {
??????? this.a = 1000;
????? }),
????? 1000
??? );
? }

通過該工具函數(shù),可以將所有對(duì)observable值的操作放在一個(gè)回調(diào)里,而不是命名各種各樣的action。

最后,Mobx提供的一個(gè)工具函數(shù),其原理redux-saga,使用ES6的generator來實(shí)現(xiàn)異步操作,可以徹底擺脫action的干擾。

@asyncAction
? changeA() {
??? this.a = 0;
??? const data = yield Promise.resolve(1)
??? this.a = data;
? }
Mobx原理分析 autorun

Mobx的核心就是通過observable觀察某一個(gè)變量,當(dāng)該變量產(chǎn)生變化時(shí),對(duì)應(yīng)的autorun內(nèi)的回調(diào)函數(shù)就會(huì)發(fā)生變化。

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
? console.log("ob.b:", ob.b);
});

ob.b = 2;

執(zhí)行該代碼會(huì)發(fā)現(xiàn),log了兩遍ob.b的值。其實(shí)從這個(gè)就能猜到,Mobx是通過代理變量的getter和setter來實(shí)現(xiàn)的變量更新功能。首先先代理變量的getter函數(shù),然后通過預(yù)執(zhí)行一遍autorun中回調(diào),從而觸發(fā)getter函數(shù),來實(shí)現(xiàn)觀察值的收集,依次來代理setter。之后只要setter觸發(fā)便執(zhí)行收集好的回調(diào)就ok了。
具體源碼如下:

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun的核心就是這一段,這里view就是autorun里的回調(diào)函數(shù)。具體到track函數(shù),比較關(guān)鍵到代碼是:

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction函數(shù)中會(huì)執(zhí)行autorun里的回調(diào)函數(shù),緊接著會(huì)觸發(fā)obserable中代理的函數(shù):

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在get中會(huì)將回調(diào)與其綁定,之后更改了obserable中的值時(shí),都會(huì)觸發(fā)這里的set,然后隨即觸發(fā)綁定的函數(shù)。

Mobx的一些坑

通過autorun的實(shí)現(xiàn)原理可以發(fā)現(xiàn),會(huì)出現(xiàn)很多我們想象中應(yīng)該觸發(fā),但是沒有觸發(fā)的場(chǎng)景,例如:

1. 無法收集新增的屬性

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
? if(ob.c){
??? console.log("ob.c:", ob.c);
? }
});
ob.c = 1

對(duì)于該問題,可以通過extendObservable(target, props)方法來實(shí)現(xiàn)。

const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

extendObservable該API會(huì)可以為對(duì)象新增加observal屬性。

當(dāng)然,如果你對(duì)變量的entry增刪非常關(guān)心,應(yīng)該使用Map數(shù)據(jù)結(jié)構(gòu)而不是Object。

2. 回調(diào)函數(shù)若依賴外部環(huán)境,則無法進(jìn)行收集

const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
? if(x == 1){
??? console.log("ob.c:", ob.b);
? }
});
x = 1;
ob.b = 2;

很好理解,autorun的回調(diào)函數(shù)在預(yù)執(zhí)行的時(shí)候無法到達(dá)ob.b那一行代碼,所以收集不到。

參考鏈接:

1.?https://www.zhihu.com/question/52219898
2.?http://taobaofed.org/blog/2016/08/18/react-redux-connect
3.?https://Mobx.js.org/index.html

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93486.html

相關(guān)文章

  • 【譯】Redux 還是 Mobx,讓我來解決你的困惑!

    摘要:我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫(kù)之間的困惑。這甚至是危險(xiǎn)的,因?yàn)檫@部分人將無法體驗(yàn)和這些庫(kù)所要解決的問題。這肯定是要第一時(shí)間解決的問題。函數(shù)式編程是不斷上升的范式,但對(duì)于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長(zhǎng)的應(yīng) 原文地址:Redux or MobX: An attempt to dissolve the Confusion 原文作者:rwieruch 我在去年大量的使用...

    txgcwm 評(píng)論0 收藏0
  • React+TypeScript+Mobx+AntDesignMobile進(jìn)行移動(dòng)端項(xiàng)目搭建

    摘要:通過裝飾器或者利用時(shí)調(diào)用的函數(shù)來進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時(shí),會(huì)監(jiān)聽數(shù)據(jù)變化確保通過觸發(fā)方法自動(dòng)更新。只能影響正在運(yùn)行的函數(shù),而無法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個(gè)移動(dòng)端項(xiàng)目搭建,主要介紹項(xiàng)...

    lindroid 評(píng)論0 收藏0
  • MobX入門TodoList

    摘要:用于簡(jiǎn)單可擴(kuò)展的狀態(tài)管理,相比有更高的靈活性,文檔參考中文文檔,本文作為入門,介紹一個(gè)簡(jiǎn)單的項(xiàng)目。任務(wù)已完成下一個(gè)任務(wù)修復(fù)谷歌瀏覽器頁(yè)面顯示問題提交意見反饋代碼創(chuàng)建在中引入主入口文件設(shè)置參考入門學(xué)習(xí)總結(jié) MobX用于簡(jiǎn)單、可擴(kuò)展的React狀態(tài)管理,相比Redux有更高的靈活性,文檔參考:MobX中文文檔,本文作為入門,介紹一個(gè)簡(jiǎn)單的TodoList項(xiàng)目。 1. 預(yù)期效果 showIm...

    csRyan 評(píng)論0 收藏0
  • react+mobx 構(gòu)建H5制作工具項(xiàng)目經(jīng)驗(yàn)總結(jié)

    摘要:三性能優(yōu)化處理做工具類的項(xiàng)目,性能是非常大的挑戰(zhàn),我總結(jié)了以下幾個(gè)常見的性能優(yōu)化點(diǎn)數(shù)據(jù)緩存。防抖,節(jié)流,事件委托內(nèi)存釋放。 內(nèi)容大綱: 1、功能介紹 2、技術(shù)架構(gòu) 3、性能優(yōu)化 4、細(xì)節(jié)分享 5、開源說明 一、項(xiàng)目功能介紹 很久沒寫過技術(shù)類的文章了,這次給大家分享一個(gè)近期的項(xiàng)目,采用react+mobx+jquery構(gòu)建的大型工具類項(xiàng)目。查看項(xiàng)目網(wǎng)址。 如果用過易企秀,maka或者...

    用戶84 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<