資訊專欄INFORMATION COLUMN
摘要：但是和一起使用還需要一個工具，這一篇就說一下在使用上的一些性能優化建議。如果的改變會引起值變化，那么會調用轉換函數，傳入作為參數，并返回結果。如果的值和前一次的一樣，它將會直接返回前一次計算的數據，而不會再調用一次轉換函數。
前面寫了兩篇文章《React組件性能優化》《Redux性能優化》，分別針對React和Redux在使用上的性能優化給了一些建議。但是React和Redux一起使用還需要一個工具React-Redux，這一篇就說一下React-Redux在使用上的一些性能優化建議。
ProviderReact-Redux是官方的React和Redux鏈接工具
一個很簡單的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個參數都是可選。
mapStateToProps在store發生改變的時候才會調用，然后把返回的結果作為組件的props。
mapDispatchToProps主要作用是弱化Redux在React組件中存在感，讓在組件內部改變store的操作感覺就像是調用一個通過props傳遞進來的函數一樣。一般會配合Redux的bindActionCreators使用。如果不指定這個函數，dispatch會注入到你的組件props中。
mergeProps用來指定mapStateToProps、mapDispatchToProps、ownProps(組件自身屬性)的合并規則，合并的結果作為組件的props。如果要指定這個函數，建議不要太復雜。
options里面主要關注pure，如果你的組件僅依賴props和Redux的state，pure一定要為true，這樣能夠避免不必要的更新。
Component就是要被連接的React組件，組件可以是任意的，不一定是AppRoot。一般會是需要更新store、或者是依賴store中state的最小組件。因為被連接的組件在Redux的state改變后會更新，大范圍的更新對性能不友好，而且其中有些組件可能是沒必要更新也會更新，所以要盡量拆分、細化，connect僅僅要更新store或依賴store的state的最小組件。
ReselectmapStateToProps也被叫做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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86475.html
摘要：簡介創建的函數，返回一個對象，包含等方法合并多個中間件處理，在實際的前調用一系列中間件，類似于綁定和函數式編程中常見的方法，介紹官方提供的綁定庫。 前言 在學習了React之后， 緊跟著而來的就是Redux了~ 在系統性的學習一個東西的時候， 了解其背景、設計以及解決了什么問題都是非常必要的。接下來記錄的是， 我個人在學習Redux時的一些雜七雜八~ Redux是什么 通俗理解 h...
摘要：本文轉載至今日頭條技術博客眾所周知，的單向數據流模式導致狀態只能一級一級的由父組件傳遞到子組件，在大中型應用中較為繁瑣不好管理，通常我們需要使用來幫助我們進行管理，然而隨著的發布，新成為了新的選擇。 本文轉載至：今日頭條技術博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);眾所周知，React的單向數據流模式導致狀態...
摘要：的優勢保證不可變每次通過操作的對象都會返回一個新的對象豐富的性能好通過字典樹對數據結構的共享的問題與原生交互不友好通過生成的對象在操作上與原生不同，如訪問屬性，。 Immutable.js Immutable的優勢 1. 保證不可變（每次通過Immutable.js操作的對象都會返回一個新的對象） 2. 豐富的API 3. 性能好 （通過字典樹對數據結構的共享） Immutab...
摘要：我們可以為元素添加屬性然后在回調函數中接受該元素在樹中的句柄，該值會作為回調函數的第一個參數返回。使用最常見的用法就是傳入一個對象。單向數據流，比較有序，有便于管理，它隨著視圖庫的開發而被概念化。 面試中問框架，經常會問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時卻答不上來，也是挺尷尬的，就干脆把react相關的問題查了下資料，再按自己的理解整理了下這些答案。 reac...
摘要：前言是一個非常實用的狀態管理庫，對于大多數使用庫的開發者來說，都是會接觸到的。在使用享受其帶來的便利的同時，我們也深受其問題的困擾。只支持同步，讓狀態可預測，方便測試。粗暴地級聯式刷新視圖使用優化。 前言 Redux是一個非常實用的狀態管理庫，對于大多數使用React庫的開發者來說，Redux都是會接觸到的。在使用Redux享受其帶來的便利的同時， 我們也深受其問題的困擾。 redux...
閱讀 1378·2021-10-08 10:04
閱讀 2681·2021-09-22 15:23
閱讀 2724·2021-09-04 16:40
閱讀 1172·2019-08-29 17:29
閱讀 1492·2019-08-29 17:28
閱讀 2988·2019-08-29 14:02
閱讀 2221·2019-08-29 13:18
閱讀 838·2019-08-23 18:35
