国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React-Redux性能優(yōu)化

JouyPub / 1570人閱讀

摘要：但是和一起使用還需要一個(gè)工具，這一篇就說(shuō)一下在使用上的一些性能優(yōu)化建議。如果的改變會(huì)引起值變化，那么會(huì)調(diào)用轉(zhuǎn)換函數(shù)，傳入作為參數(shù)，并返回結(jié)果。如果的值和前一次的一樣，它將會(huì)直接返回前一次計(jì)算的數(shù)據(jù)，而不會(huì)再調(diào)用一次轉(zhuǎn)換函數(shù)。

前面寫了兩篇文章《React組件性能優(yōu)化》《Redux性能優(yōu)化》，分別針對(duì)React和Redux在使用上的性能優(yōu)化給了一些建議。但是React和Redux一起使用還需要一個(gè)工具React-Redux，這一篇就說(shuō)一下React-Redux在使用上的一些性能優(yōu)化建議。

React-Redux是官方的React和Redux鏈接工具
Provider

一個(gè)很簡(jiǎn)單的React組件，它主要的作用是把store放到context中，connect就可以獲取store，使用store的方法，比如dispatch。其實(shí)沒有被connect的組件通過(guò)聲明contextTypes屬性也是可以獲取store，使用store的方法的，但是這個(gè)時(shí)候，如果使用dispatch修改了store的state，React-Redux并不能把修改后的state作為props給React組件，可能會(huì)導(dǎo)致UI和數(shù)據(jù)不同步，所以這個(gè)時(shí)候一定要清楚自己在做什么。

connect

一個(gè)柯里化函數(shù)，函數(shù)將被調(diào)用兩次。第一次是設(shè)置參數(shù)，第二次是組件與 Redux store 連接。connect 函數(shù)不會(huì)修改傳入的 React 組件，返回的是一個(gè)新的已與 Redux store 連接的組件，而且你應(yīng)該使用這個(gè)新組件。connect的使用方式是connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])(Component)，第一次調(diào)用的時(shí)候4個(gè)參數(shù)都是可選。

mapStateToProps在store發(fā)生改變的時(shí)候才會(huì)調(diào)用，然后把返回的結(jié)果作為組件的props。

mapDispatchToProps主要作用是弱化Redux在React組件中存在感，讓在組件內(nèi)部改變store的操作感覺就像是調(diào)用一個(gè)通過(guò)props傳遞進(jìn)來(lái)的函數(shù)一樣。一般會(huì)配合Redux的bindActionCreators使用。如果不指定這個(gè)函數(shù)，dispatch會(huì)注入到你的組件props中。

mergeProps用來(lái)指定mapStateToProps、mapDispatchToProps、ownProps(組件自身屬性)的合并規(guī)則，合并的結(jié)果作為組件的props。如果要指定這個(gè)函數(shù)，建議不要太復(fù)雜。

options里面主要關(guān)注pure，如果你的組件僅依賴props和Redux的state，pure一定要為true，這樣能夠避免不必要的更新。

Component就是要被連接的React組件，組件可以是任意的，不一定是AppRoot。一般會(huì)是需要更新store、或者是依賴store中state的最小組件。因?yàn)楸贿B接的組件在Redux的state改變后會(huì)更新，大范圍的更新對(duì)性能不友好，而且其中有些組件可能是沒必要更新也會(huì)更新，所以要盡量拆分、細(xì)化，connect僅僅要更新store或依賴store的state的最小組件。

Reselect

mapStateToProps也被叫做selector，在store發(fā)生變化的時(shí)候就會(huì)被調(diào)用，而不管是不是selector關(guān)心的數(shù)據(jù)發(fā)生改變它都會(huì)被調(diào)用，所以如果selector計(jì)算量非常大，每次更新都重新計(jì)算可能會(huì)帶來(lái)性能問題。Reselect能幫你省去這些沒必要的重新計(jì)算。
Reselect 提供 createSelector 函數(shù)來(lái)創(chuàng)建可記憶的 selector。createSelector 接收一個(gè) input-selectors 數(shù)組和一個(gè)轉(zhuǎn)換函數(shù)作為參數(shù)。如果 state tree 的改變會(huì)引起 input-selector 值變化，那么 selector 會(huì)調(diào)用轉(zhuǎn)換函數(shù)，傳入 input-selectors 作為參數(shù)，并返回結(jié)果。如果 input-selectors 的值和前一次的一樣，它將會(huì)直接返回前一次計(jì)算的數(shù)據(jù)，而不會(huì)再調(diào)用一次轉(zhuǎn)換函數(shù)。這樣就可以避免不必要的計(jì)算，為性能帶來(lái)提升。

總結(jié)

謹(jǐn)慎使用context中的store

被connect組件更新的時(shí)候影響范圍盡量小，避免不必要更新

使用Resselect避免不必要的selector計(jì)算

參考

React-Redux

Reselect

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86475.html

相關(guān)文章

  • React-redux基礎(chǔ)

    摘要：簡(jiǎn)介創(chuàng)建的函數(shù)，返回一個(gè)對(duì)象，包含等方法合并多個(gè)中間件處理，在實(shí)際的前調(diào)用一系列中間件，類似于綁定和函數(shù)式編程中常見的方法，介紹官方提供的綁定庫(kù)。 前言 在學(xué)習(xí)了React之后， 緊跟著而來(lái)的就是Redux了~ 在系統(tǒng)性的學(xué)習(xí)一個(gè)東西的時(shí)候， 了解其背景、設(shè)計(jì)以及解決了什么問題都是非常必要的。接下來(lái)記錄的是， 我個(gè)人在學(xué)習(xí)Redux時(shí)的一些雜七雜八~ Redux是什么 通俗理解 h...

    jsyzchen 評(píng)論0 收藏0

  • React 新 Context API 在前端狀態(tài)管理的實(shí)踐

    摘要：本文轉(zhuǎn)載至今日頭條技術(shù)博客眾所周知，的單向數(shù)據(jù)流模式導(dǎo)致狀態(tài)只能一級(jí)一級(jí)的由父組件傳遞到子組件，在大中型應(yīng)用中較為繁瑣不好管理，通常我們需要使用來(lái)幫助我們進(jìn)行管理，然而隨著的發(fā)布，新成為了新的選擇。 本文轉(zhuǎn)載至：今日頭條技術(shù)博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);眾所周知，React的單向數(shù)據(jù)流模式導(dǎo)致狀態(tài)...

    wing324 評(píng)論0 收藏0

  • React-redux進(jìn)階之Immutable.js

    摘要：的優(yōu)勢(shì)保證不可變每次通過(guò)操作的對(duì)象都會(huì)返回一個(gè)新的對(duì)象豐富的性能好通過(guò)字典樹對(duì)數(shù)據(jù)結(jié)構(gòu)的共享的問題與原生交互不友好通過(guò)生成的對(duì)象在操作上與原生不同，如訪問屬性，。 Immutable.js Immutable的優(yōu)勢(shì) 1. 保證不可變（每次通過(guò)Immutable.js操作的對(duì)象都會(huì)返回一個(gè)新的對(duì)象） 2. 豐富的API 3. 性能好 （通過(guò)字典樹對(duì)數(shù)據(jù)結(jié)構(gòu)的共享） Immutab...

    孫淑建 評(píng)論0 收藏0

  • React專題：react，redux以及react-redux常見一些面試題

    摘要：我們可以為元素添加屬性然后在回調(diào)函數(shù)中接受該元素在樹中的句柄，該值會(huì)作為回調(diào)函數(shù)的第一個(gè)參數(shù)返回。使用最常見的用法就是傳入一個(gè)對(duì)象。單向數(shù)據(jù)流，比較有序，有便于管理，它隨著視圖庫(kù)的開發(fā)而被概念化。 面試中問框架，經(jīng)常會(huì)問到一些原理性的東西，明明一直在用，也知道怎么用， 但面試時(shí)卻答不上來(lái)，也是挺尷尬的，就干脆把react相關(guān)的問題查了下資料，再按自己的理解整理了下這些答案。 reac...

    darcrand 評(píng)論0 收藏0

  • React-Redux進(jìn)階（像VUEX一樣使用Redux）

    摘要：前言是一個(gè)非常實(shí)用的狀態(tài)管理庫(kù)，對(duì)于大多數(shù)使用庫(kù)的開發(fā)者來(lái)說(shuō)，都是會(huì)接觸到的。在使用享受其帶來(lái)的便利的同時(shí)，我們也深受其問題的困擾。只支持同步，讓狀態(tài)可預(yù)測(cè)，方便測(cè)試。粗暴地級(jí)聯(lián)式刷新視圖使用優(yōu)化。 前言 Redux是一個(gè)非常實(shí)用的狀態(tài)管理庫(kù)，對(duì)于大多數(shù)使用React庫(kù)的開發(fā)者來(lái)說(shuō)，Redux都是會(huì)接觸到的。在使用Redux享受其帶來(lái)的便利的同時(shí)， 我們也深受其問題的困擾。 redux...

    levius 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<