FLUX + React · 關於Responsive Web Design（三）

AngularJS作為MVC架構，彷彿已經走到頂峰了。但是這卻不是終場，而是開幕。

MVC 和 MVVM 的問題

MVC和MVVM都是主流的軟體架構。MVC概念誕生於70年代，2004年由Ruby on Rail的盛行再次引起重視。快速複習一下，如下圖： Model 處理數據和邏輯。View 負責顯示。Controller 負責處理用戶請求轉為Model可以處理的指令。

上面這張圖看起來很漂亮，但事情很快就變複雜。MVVM出現於2005年。其中最後一個VM（ViewModel）代替了C（Controller）。其關鍵「改進」是數據同步（DataBinding），就是說view的數據狀態發生變化可以直接影響Model(VM)，反之亦然。這也可以說是AngularJS的強項和核心特色。

不管MVC、MVVM，軟體架構的核心目的是去耦合化。讓V、M、C可以解耦由不同的人並行開發，的確是是架構上的進步。VM的出現則是簡化了結構，加快了響應。

但是隨著時代向前，項目越來越大，迭代速度越來越快。對維護、測試的要求變高後，很多人發現MVC架構中各元件之間都可以雙向通訊，形成了複雜的結構，難以Debug和維護、也難以測試。項目變得複雜，而複雜的背後就是不可靠。

FLUX 是更易於維護和測試的軟體架構

FLUX是Facebook在2014年提出的軟體架構。Flux是拉丁語的Flow，這個名字有點玄。如果用MVC的命名習慣，它應該叫 ADSV - Action Dispatcher Store View。如果想快速理解，Store可以看做Model，主要是數據處理。 Action - Dispatcher 組合是一個更強約定的Controller設計。Action主要是指用戶觸發的事件，但也可以是View觸發的事件。Dispatcher 則是負責事件消息分發，但它有一個很強的約定，同一時間只發一個事件。同時 Dispatcher 還有個特別功能，就是等待 - Waitfor - 可以等待另一個指定事件處理完成後再發送當前事件消息。

不過上面的ADSV並不是重點。Flux的關鍵設計理念是：數據和邏輯永遠單向流動。而 Action - Dispatcher 這樣的約定和設計，只是為了服從單向流動這個核心原則的一種典型實現。

這可能也是Facebook不把這個架構稱為 ADSV 而叫 FLUX 的一個原因 - 因為 ADSV 只是架構的一種實現，而FLUX（Flow）則代表這個架構的原則和本質。

FLUX 架構的好處

• 簡單即可靠 （Simplicity is prerequisite for reliability.）

這個是真理。我暫不解釋。

• 易於 test case 和 debug

稍微細想一下，FLUX模式下，單元測試只要發送各種事件、事件組合、數據和數據組合。而另一邊，在MVC MVVM時代，一個數據或狀態的改動可能來自多個完全不同的源頭時，追查問題的複雜度困難度，顯然比一個FLUX這樣的單向架構要複雜。

FLUX 架構帶來的挑戰

Flux 的締造者自己也說，Flux 的做法就像我們回到了使用 PHP 服務端輸出前端的時代。那麼它的挑戰是顯而易見的 —— 怎麼做到現代前端設計的快速「響應」能力 RWD 。

正是為了解決這個問題，React 就誕生並發揚光大了。

React 的核心功能和本質是 View

如果說 AngularJS 是 MVC架構。 React 就是沒有架構的，React 只是個 View！

React 最常用的 Call 是 Render()。

吐槽：對於做遊戲的人來說，突然一切都變得非常熟悉了，不是么？

Virtual DOM

React 最強（牛X）的設計，就是Virtual DOM。因為我們從代碼看就會發現，每次數據有變化，React都會把和整個數據有關的顯示層都Render()一遍。如果這個 Render() 真的都去實實在在的銷毀和創建HTML裡面的元件DOM，顯然體驗會一團糟。

所以 React 加入一套Virtual DOM，可以理解說每次 Render()，React 只是把 View 渲染到了一個虛擬的網頁中。然後又把這個虛擬的網頁和當前真的顯示中的網頁，做一次diff差異比較。然後只是對差異的部分，向DOM做追加、插入、刪除和修改。而且，React還把這部分的性能優化的非常非常好。

吐槽：非常懷疑React的團隊和做遊戲引擎的開發者關係密切。再加上 React 力推的 JSX 語言，竟然是來自遊戲廠商 DeNA 的，實在難以不令人有此猜測。

JSX

JSX作為Javascript的擴展，是React推薦使用的默認語言。JSX來自追求性能的遊戲廠商。它最強大的地方，應該是可以在代碼中更簡單的書寫 html 的 DOM。比如 JS 中你本來要這樣創建一個DOM：

var foo = React.createElement(n div,n {color:"blue"},n React.createElement(Profile, null, "text")n);n

如果用JSX你可以直接寫html到代碼裡面不用考慮引號的問題：

var foo = <div color="blue"><Profile>text</Profile></div>;n

如果是大段的html代碼，還可以用小括弧：

var foo = (n <Form>n <FormRow>n <FormLabel />n <FormInput />n </FormRow>n </Form>n);n

用了 JSX的最大好處，是再也不用考慮單引號、雙引號、反斜杠和換行了。不僅複雜度降低更少犯錯。甚至設計師都可以快速上手。

吐槽：傳統架構更傾向於設計師寫HTML和CSS文件，工程師寫JS代碼的分工方式。現在React讓代碼中寫html變得更簡單了（事實上完全是推薦在代碼中寫html），這個趨勢也和矽谷設計與開發之間的邊界越來越模糊有關。這真是一件好事，因為完全不同開發的設計真的很難做出好的交互設計……