這是關(guān)于Redux connect函數(shù)的第五篇.隨著學(xué)習(xí)的深入,理解加深了.如果是對于組件渲染的優(yōu)化有需求的話,這篇文章是第一步. 總結(jié)為一句就是:組件要從state中各取所需.不要胡子眉毛一把抓.避免不必要的渲染.
connect這個方法實在是非常的關(guān)鍵,需要好好揣摩其中的代碼.
翻譯開始
如果你在React的app中正在使用Redux,你可能已經(jīng)在使用react-redux把你的組件連接到state上. connect方法是一個耍滑頭的婊子,盡管只用非常簡單的API,但是背后像是變戲法一樣(譯注:我對Redux的理解實際就是從理解Connect的概念開始的).實施非常容易,尤其是剛開始的時候,僅僅把組件鏈接到state就完事,沒有考慮到其中發(fā)生了什么事情.其中最容易犯的迷糊是把state connect到了渲染組件的頂層了.
上面的說法到底是幾個意思?我很高興你你問了這個問題-下面的圖標(biāo)闡述了這個場景.在這個實例中 <Page>組件被連接到了渲染樹的最頂層.
為什么這很爛?
- 你改變profile image的時候 整個
<Page>在渲染 - 你從列表中刪除一個feed的時候 整個
<Page>在渲染 - 你添加一個image的時候,整個
<Page>在渲染
替代連接state到<Page>的方法是.讓各個子組件直接連接到state的分片中. 下面是一個示意圖
為什么這么做更好?
- 改變 profile image僅僅渲染
<Profile>組件 - 移除list中的條目,僅僅渲染
<Feed>組件 - 更少的渲染===???????? (譯注:不知道是神馬意思)
記住,當(dāng)你connect你的組件的時候,是告訴React只要組件需要的props已改變就執(zhí)行渲染過程.每個組件執(zhí)行自己各自的connect,避免了不必要的渲染過程.
包裝起來
我建議任何使用connect的新人花些時間來充分理解connect到一個組件的時候到底發(fā)生了什么事情.
返利回來
- 如果你使用Redux,我強(qiáng)烈建議你好好看看reselect.這個組件可以讓你為Redux創(chuàng)建更為智能的selector.一個Selector除非是他的參數(shù)發(fā)生了變化,否則是不會發(fā)生重新計算的(譯注: memoize,緩存功能),可以避免不必要的渲染(譯注:其實功能還更多,列表項的篩選也可以在這里執(zhí)行).
- 充分閱讀react-redux的文檔.
connect方法還有很多的選項,不只是mapStateToProps和mapDispatchToProps,包括renderCountProps等,你可以添加到你的組件中用來追蹤渲染的次數(shù).
connectrendrCountProps選項可以Debug不必要的debug.
譯注:其實f8 APP就是這么做的,當(dāng)時照貓畫虎覺得也很好啊.但是前不久才意識到了組件從整個的state中各取所需的巧妙之處,結(jié)合Reselect的功能,就更厲害了.這是性能優(yōu)化的第一個步. 其實遠(yuǎn)比這還要有意思,例如用戶登錄后,后端返回的信息可以放到state中,凡是需要登錄狀態(tài)或信息的組件,只需要selector這一部分就可以了. 登錄組件不用考慮怎么給后續(xù)添加的邏輯組件傳遞數(shù)據(jù)的問題. 后續(xù)添加組件,如果有需要就selector登錄信息就可以了. 這一點是 React組件之間的相互耦合交織狀態(tài)走向集中管理的非常重要的一步. 學(xué)習(xí)Redux其實就是要有這個思維轉(zhuǎn)變的過程.
