Arunoda Susiripala 請參看原文
近來(Jan,2016),自給自足的container(Redux的容器)方法在React的社區中非常的流行.他們在Realy,Redux甚至是在Meteor中廣泛使用.這篇文章里我們深入container內部,了解一下怎么簡便的組合containers.
什么是Container?
在React中,我們有props和states來管理組件的數據需求.最近有一個趨勢,在組件中僅僅只通過props來接收數據和action.我們僅僅在組件內部保留state.
我們有時候叫這些組件為“單純展示組件”.
我也不太確定誰發明的這個術語.但是我才可能是Dan Abramov.
查看一下他的文章“Smart and Dumb Components”.
但是我認為叫做UI組件更好一點(或者僅僅叫做組件).
接著又另一套組件實際管理本地數據和獲取遠程數據.這些組件被稱為container組件.Relay和Redux的React綁定是他們更流行了.
下面是怎么使用Reat Devtools來查看組件的視圖.
Container(BlogPost)接收postId Props.然后他將會獲取數據傳遞到實際UI組件中.
Container的常規任務
container的主要任務是獲取數據,這里面有一些事情要做,讓我們看看:
- 請求數據(調用訂閱或者僅僅獲取數據)
- 當數據加載的時候展示加載圖片
- 一旦數據返回,把它傳遞到UI組件中
- 如果有錯誤,展示給用戶
- 當props改變了,需要重新獲取或者重新訂閱
- 當container卸載的時候,需要清除資源.
這里container有很多的任務要完成.如果你想自己做這些任務,你就不得不做一些重復的工作,發生錯誤的來源就由此誕生了.
React Komposer的介紹
React Komposer試圖幫助我們更容易的合并containers.有了它,你可以使用任何數據資源,不管你的數據是來自于Promise,Observable甚至是Meteor‘s Tracker.
讓我們看看一個簡單的例子
像下面這樣創建一個數字時鐘:
這是一個好的實例,因為我們可以測試一個container的幾乎所有的功能.開始
首先安裝react-komposer:
npm i — save react-komposer
然后輸入compose函數：
import {compose} from ‘react-komposer’;
現在需要一個UI組件去渲染時間:
const Time = ({time}) => (<div>{time}</div>);
這是我們的組合函數:
獲取時間的時候需要調用onData回調函數(這里沒有實際做什么.)
需要調用onData函數多少次可以,只要程序需要.如果有錯誤,可以把錯誤信息作為onData的第一個值.
最后,我們需要返回一個清除資源的額函數.在這個實例中用他來清除setInterva的句柄.
好了,現在來合并一下composer:
const Clock = compose(composerFunction)(Time);
然后渲染到DOM中:
ReactDOM.render(<Clock />, document.body);
現在我們得到了一個自我管理(state)的時鐘.看看實際演示.
這里有個更復雜的版本,使用props,處理錯誤信息.
你也可以改變默認加載和錯誤組件.查看一下react-komposer 文檔.
獲得好處:更容易測試
作為這個組件的附加效果,我們現在可以很容易測試UI代碼.
- 因為UI組件僅僅通過props接收數據(和action),是的測試很容易.
- 也可以測試組合函數的數據獲取邏輯.
對于多種數據源的支持
我已經提到過,可以使用這個組件和任何數據源一起工作,因為組合的API是通用的.我們有處理流行數據源的特定APIS.
這里是:
- composeWithPromise用于Promise-baseed 數據源
- composeWithObservable用于Rx.js Observalbe-based數據源
- composeWithTracker出事特殊的一些數據源.
有了這些API,我們可以使用react-komposer去合并任何數據源的container.
看看repo,有更多的例子.
在你的app中使用一下react-komposer,你會喜歡上他的.
