對React的理解

隨着Facebook開源了React Native for Android，React的前景彷佛更加光明。它從最先的UI框架慢慢演變成了一套web應用的解決方案，而且它衍生出來的React Native更是承載着宏偉的目標：learn once, write anywhere。這對前端來講彷佛是種不可抗拒的吸引力。 

React有三個關鍵詞：

- Just the ui
- virtual dom
- data flow

要理解React，我從它的這三個關鍵詞入手。

2.1 Just the ui

React 負責UI層面的展示，儘管不少人用React做[MVC]架構中的View層,但這並非React的本意。

通常的狀況下，咱們在開發過程當中，一般會使用模板或者直接使用HTML來構建UI，而HTML是靜態的，使用模板在大多數狀況下是能夠知足需求的，可是在複雜的邏輯情境中就顯得有些吃力了，過多的if else或者邏輯控制在模板裏，都會讓代碼變得難以維護，固然這仍是說整個項目中使用統一的模板的狀況下。

React換了一種思路解決問題，它把UI拆分紅組件，而不是經過模板引擎和展現邏輯，使得它能夠易於拓展和維護。所以它引入了JSX這種語法規則，可讓咱們使用相似HTML的語法去寫js的函數調用。

2.2 virtual dom

瀏覽器渲染頁面的通常過程一般是這樣的：

1 加載html->生成DOM樹->解析css生成Render樹->生成頁面

 那麼React的virtual dom是怎麼作的呢？

1 生成virtual dom->diff->必要的DOM更新

在這裏面大部分的操做放在js中去完成，由於咱們都知道dom操做是很昂貴的。因此在通常的狀況下React的性能仍是很不錯的。

2.3 data flow

React中的數據流是沿着組件樹從上到下單向流動的。

這裏的data flow指的是一種應用架構的實現方式，好比說，數據存放在哪裏，在哪裏觸發事件，如何響應用戶操做。它不是React提供的什麼新功能，應該是React構建應用的實踐。咱們理解了以後的Flux或許就更加容易理解data flow這個概念了。

2.4 Flux overview

Flux是facebook配套React強推的一種應用架構思想。它利用數據的單向流動爲React的可複用的視圖組件提供了補充。

與React的數據流動方式相同，在Flux架構中，數據也是單向流動的：

簡單的說，全部的數據流動都會通過Dispatcher。Action能夠經過action creator產生並被提供給dispatcher，但多數狀況下action是經過用戶與views的交互產生。

在View層捕獲用戶的交互，產生一個Action，經過觸發註冊在Dispatcher上面的事件回調，使得相關的Store響應Action，而後會觸發到Store上面的onChange事件，進一步的更新View。

數據流動也始終是如上圖所示的單向流動的。

實踐了這個例子：[thinking in react]會對理解React的基本工做原理有很好地幫助。