理解mobx

mobx是什麼？

mobx是一個用來管理前端狀態變更的js庫。這裡強調狀態的變更，是應為在複雜的前端應用裡面，理清內部狀態的變更是一件不容易的事情。在開發React應用時，我比較喜歡mobx，我希望通過這篇文章讓大家理解mobx背後的哲學。

從一次交互說起

下面以一次簡單的用戶交互為例子，講解前端內部狀態的變更。

交互簡介

• 用戶首選看到的是一個todo list列表界面

• 當用戶點擊其中一個Task後
• 界面跳轉到顯示單個Task詳細信息頁面

交互過程

• 用戶點擊觸發一個事件（event）

• 點擊事件觸發一個內部行為

• 內部行為本質上是定義好的一個函數，這個函數可以改變程序內部狀態

• 程序內部狀態，可以理解為一個數據結構，包包含了模型（model）狀態和UI顯示狀態，如圖標示的就是模型狀態的改變

• 這裡的點擊事件觸發了SELECT行為，導致模型數據更新同時UI顯示狀態改變

• UI的顯示和交互本質上是組件樹的顯示和變更

• UI的顯示即組件樹的展現（如DOM展現）

• UI的變更即組件樹的改變，組件樹改變導致界面更新
• 理想狀態下，組件是一個無狀態的函數，負債把一部分模型狀態轉換成為UI結構（DOM樹）

• 多個Component嵌套組合，形成一個大的組件，即一個大的轉換函數，負債把整個模型狀態轉換成用戶界面

理解交互過程

交互過程的本質是一個外部事件觸發的內部狀態改變，這種內部狀態的改變帶來了UI的更新和其他的副作用（side effect，入向後台發請求）。所以，在處理複雜的交互時，我們的關注點應該是程序狀態的變更及其帶來的副作用。

為什麼要用mobx？

上面說了，程序狀態變更及其副作用是複雜交互的核心。

狀態變更的管理是一個複雜的過程。其涉及一系列的函數觸發，從外部事件開始，觸發內部行為，導致狀態改變，狀態改變引起UI更新等。這個過程如果靠手工管理是非常繁瑣易錯的。

mobx就是這樣一個庫，它提供了一套簡單的API和decorator語法，可以幫助我們簡化狀態變更管理。

具體來說，使用mobx管理狀態時，當我們更新模型狀態後，由模型變更帶來的UI更新、數據序列化等一系列操作，mobx會自動幫我們完成。

所以，當使用mobx開發React應用時，我們只需要定義數據模型（model）和改變這些模型的行為（action），然後把模型的屬性和action綁定到Component。當我們程序狀態更新後，mobx會高效自動的更新Component。

mobx的哲學

其實mobx提供的不只是Component的自動更新，mobx本身提供的是一種自動更新的機制。

總結

mobx是一個小巧優雅的庫，可以幫助我們很好的管理前端狀態的變更。