Mobx 原始碼閱讀簡記

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

主要三大部分atom、observable、derivation

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物件的get和set函式，在有新屬性訪問時或改變值時會呼叫get和set函式

重點：（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 原始碼閱讀簡記

Mobx 原始碼閱讀簡記

Mobx 原始碼閱讀簡記

mobx原始碼解讀3

相關推薦