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