React-Redux性能優化

前面寫了兩篇文章《React組件性能優化》《Redux性能優化》，分別針對React和Redux在使用上的性能優化給了一些建議。可是React和Redux一塊兒使用還須要一個工具React-Redux，這一篇就說一下React-Redux在使用上的一些性能優化建議。

React-Redux是官方的React和Redux連接工具

Provider

一個很簡單的React組件，它主要的做用是把store放到context中，connect就能夠獲取store，使用store的方法，好比dispatch。其實沒有被connect的組件經過聲明contextTypes屬性也是能夠獲取store，使用store的方法的，可是這個時候，若是使用dispatch修改了store的state，React-Redux並不能把修改後的state做爲props給React組件，可能會致使UI和數據不一樣步，因此這個時候必定要清楚本身在作什麼。

connect

一個柯里化函數，函數將被調用兩次。第一次是設置參數，第二次是組件與 Redux store 鏈接。connect 函數不會修改傳入的 React 組件，返回的是一個新的已與 Redux store 鏈接的組件，並且你應該使用這個新組件。connect的使用方式是connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)，第一次調用的時候4個參數都是可選。

1. mapStateToProps在store發生改變的時候纔會調用，而後把返回的結果做爲組件的props。

2. mapDispatchToProps主要做用是弱化Redux在React組件中存在感，讓在組件內部改變store的操做感受就像是調用一個經過props傳遞進來的函數同樣。通常會配合Redux的bindActionCreators使用。若是不指定這個函數，dispatch會注入到你的組件props中。

3. mergeProps用來指定mapStateToProps、mapDispatchToProps、ownProps(組件自身屬性)的合併規則，合併的結果做爲組件的props。若是要指定這個函數，建議不要太複雜。

4. options裏面主要關注pure，若是你的組件僅依賴props和Redux的state，pure必定要爲true，這樣可以避免沒必要要的更新。

5. Component就是要被鏈接的React組件，組件能夠是任意的，不必定是AppRoot。通常會是須要更新store、或者是依賴store中state的最小組件。由於被鏈接的組件在Redux的state改變後會更新，大範圍的更新對性能不友好，並且其中有些組件多是不必更新也會更新，因此要儘可能拆分、細化，connect僅僅要更新store或依賴store的state的最小組件。

Reselect

mapStateToProps也被叫作selector，在store發生變化的時候就會被調用，而不論是不是selector關心的數據發生改變它都會被調用，因此若是selector計算量很是大，每次更新都從新計算可能會帶來性能問題。Reselect能幫你省去這些不必的從新計算。
Reselect 提供 createSelector 函數來建立可記憶的 selector。createSelector 接收一個 input-selectors 數組和一個轉換函數做爲參數。若是 state tree 的改變會引發 input-selector 值變化，那麼 selector 會調用轉換函數，傳入 input-selectors 做爲參數，並返回結果。若是 input-selectors 的值和前一次的同樣，它將會直接返回前一次計算的數據，而不會再調用一次轉換函數。這樣就能夠避免沒必要要的計算，爲性能帶來提高。

總結

謹慎使用context中的store

被connect組件更新的時候影響範圍儘可能小，避免沒必要要更新

使用Resselect避免沒必要要的selector計算

參考

React-Redux

Reselect