dva系列3 - UI與數據邏輯的粘合層

dva系列1 - 有狀態的UI組件和dva系列2 - 數據邏輯哪兒去了？分別聊了UI和數據邏輯層，目前它們還是彼此獨立，互相感知不到。那麼如何讓它們彼此感知呢？下面我們詳細聊聊這個話題。

郎才女貌尚需媒，平行世界一蟲洞

我們的劇本中，react擅長濃妝素抹，顏值氣質俱佳，一笑一顰動人；redux擅長推理演算，理性內斂從容，一分一毫精確。他們處於兩個平行的世界，無緣認識彼此。他們有一種共同的紐帶叫數據，數據是react用於裝扮的素顏，缺之就是白骨精了；數據是redux用於演算的卦象，缺之就是無意義的推理。純凈的UI組件需要的數據是以props形式存在，而單純的redux需要的數據時以store形式存在，是時候讓他們感知到彼此的存在，通過數據建立起因果，彼此的每次變化都會引起對方的注意，進而給對方一個反饋。

我們主角的紅娘是react-redux，名如其人，在兩個平行世界都有她的勢力範圍，react一方她偽裝成組件，提供Provider組件和connect方法；redux一方她又深諳redux這個神運算元的習性，毫不客氣地把數據扔給他演算。有時候為了讓UI更純粹，感知不到redux的勾搭，這位紅娘在UI組件的世界裡還培養自己的間諜——容器組件，專門從事倒騰數據的事情，讓單純的react組件更馴服順從地為自己所用。不過在dva中，你大可不必這麼麻煩，直接讓react感知redux的溫柔即可，又不是見不到光的姻緣，沒必要遮遮掩掩。如果組件的家族比較龐大，彼此間又有錯綜複雜的關係，redux一己之力難以招架，可以用容器組件這些間諜做下緩衝，也好讓組件家族的成員不要小看redux。

引入了react-redux，兩位主角終於可以婦唱夫隨、和諧相處地在一起了。平行世界不再是無法感知到彼此存在的平行線，而在時間軸上出現了許許多多的蟲洞，讓數據在時間的流里無障礙地流動，進而影響react和redux的表現，使他們鮮活起來

react-redux到底做了什麼

react-redux給了react一種能力dispatch，而這種能力是redux可感知的，時刻監聽的。當一個action被組件dispatch到redux，redux立即處理並把結果反饋給state-diff中心，state-diff中心判斷是否變化之後，把變化後的state推送到connect，connect把數據轉化為props觸發虛擬DOM的重新創建 並與上一次的做diff，進而改變UI。而action大部分時候是UI方觸發的，這樣形成了一種交互行為上的單向數據流。如下圖：

dva中的粘合層

import { connect } from dva;// ...function mapStateToProps(state) {}export default connect(mapStateToProps)(Xxx);

在dva中，你不需要關心Provider組件(已內置)，只需要關心哪個組件是需要和redux建立聯繫的，顆粒越小越好(這樣可以避免打擾到無需diff的虛擬DOM)。一個頁面可以包含多個connect組件，盡量保持它們的彼此獨立不耦合，雖然父子同時被connect也不會出現問題，但是子組件可能會被觸發多次diff。

通過這三篇的介紹，頁面級的知識點就是這些了，接下來會聊頁面間的聯繫。