Mobx 原始碼閱讀簡記

2021-09-12 19:26:50 字數 3238 閱讀 2495

整體會寫得比較亂,同時也比較簡單,和讀書筆記差不多,基本是邊讀邊寫。見諒~

主要三大部分atomobservablederivation

mobx的原子類,能夠被觀察和通知變化,observablevalue繼承於atom。observablevalue ---> atom

同時裡面有幾個比較重要的屬性與方法。

方法observable是乙個工廠函式,讓資料變得可觀察。這個東西需要和上述的atom建立聯絡,即將具體的atom聯絡起來。從而打通自身能夠被觀察,同時能通知變化的整個流程。

三種可被觀察的資料型別:物件,陣列,map,下面簡單介紹如何實現。假如都不是,就會提示使用者呼叫observable.box,使其擁有get,set方法,即上述說的observablevalue資料型別。

部分**如下:

fucntion observable(v)
重點是observable.object、observable.array、observable.map三者的實現,下面是討論關於物件的實現方式

其餘的屬性,會新建乙個observablevalue,存放到adm[$mobx].values裡面,並通過object.defineproperty設定了該屬性的get和set屬性

然後,重點是建立proxy時的handler物件的getset函式,在有新屬性訪問時或改變值時會呼叫getset函式

重點:(observablevalue簡稱為ov,object.defineproperty簡稱為od)

這樣子,整個物件屬性的監聽流程就建立起來了

reaction(反應)是一類特殊的derivation,可以註冊響應函式,使之在條件滿足時自動執行。使用如下:

// new reaction(name, oninvalidate)

const reaction = new reaction('name', () => )

const ob = observable.object()

reaction.track(() => `)

console.log(`$ hey hey hey!`)

})ob.name = 'mike' // 'excuted!'

讓我們分析一下原始碼實現,主要有幾個重點:

export function trackderivedfunction(derivation: iderivation, f: () => t, context: any)  else  catch (e) 

}globalstate.trackingderivation = prevtracking

// 比較新舊依賴,更新依賴

binddependencies(derivation)

return result

}

可以看到,重點有兩個,乙個是將當前的derivation分配為全域性的globalstate.trackingderivation,乙個是下面的更新依賴過程。

被觀察的變數發生變化時

此時會呼叫observable的set函式,然後呼叫reportchanged,最終會呼叫乙個叫做propagatechanged函式。

export function propagatechanged(observable: iobservable) 

d.onbecomestale()

}d.dependenciesstate = iderivationstate.stale

})}

onbecomestale最終會呼叫derivation裡的schedule函式,裡面做了兩件事:

至此,整個mobx的資料觀察與響應流程就都一一解釋完整了(autorun,autorunasync,when等函式都是基於reaction來實現的,就不作過多解讀了)

既然mobx都說了,那就把mobx-react也分析一下吧。其實很簡單,只要理解了reaction與observable,就很容易明白mobx-react的實現了。

mobx-react的實現主要也是兩點

第一點比較簡單,實現乙個hoc,把observerablestore新增到context上,然後被inject的元件就可以拿到所需的observerablestore

我們重點看下第二點,實現第二點的主要邏輯,在observer.js裡面的makecomponentreactive函式中,看下面簡化版的重點解析

// makecomponentreactive

function makecomponentreactive(render)

try catch (e)

if (isdevtoolsenabled)

})return rendering

}// ....省略一些**

// 新建乙個reaction,註冊響應函式

const reaction = new reaction(`$#$.render()`, () => finally }}

})// 改寫原來的render

reaction.reactcomponent = this

reactiverender[mobxadminproperty] = reaction

this.render = reactiverender

return reactiverender.call(this)

}

可以見到,通過建立乙個reaction,實現了render函式裡的被觀察的變數收集及響應函式註冊。而且在通過forceupdate重新更新元件後,render函式會被重新執行一遍,從而實時更新被觀察的變數。整體的實現還是巧妙的。

除此之外,還有一些生命週期的優化,對props、state也進行監聽等操作,在這裡就不一一解讀了

Mobx 原始碼閱讀簡記

整體會寫得比較亂,同時也比較簡單,和讀書筆記差不多,基本是邊讀邊寫。見諒 主要三大部分atom observable derivation mobx的原子類,能夠被觀察和通知變化,observablevalue繼承於atom。observablevalue atom 同時裡面有幾個比較重要的屬性與方...

Mobx 原始碼閱讀簡記

整體會寫得比較亂,同時也比較簡單,和讀書筆記差不多,基本是邊讀邊寫。見諒 主要三大部分atom observable derivation mobx的原子類,能夠被觀察和通知變化,observablevalue繼承於atom。observablevalue atom 同時裡面有幾個比較重要的屬性與方...

mobx原始碼解讀3

計算屬性 function todo var vm new todo mobx.autorun function 這種方式 已經被廢掉 要求使用修飾符或修飾方法 function todo this var vm new todo mobx.autorun function 也可以使用ie8發明的g...