成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

React組件性能優(yōu)化：PureRender和Immutable Data

megatron / 684人閱讀

摘要：插件允許我們?cè)诘恼Z(yǔ)法中使用在傳遞數(shù)據(jù)時(shí)，可以通過(guò)進(jìn)一步提升組件的渲染性能，是針對(duì)可變對(duì)象和不可變對(duì)象所做的折衷。使用之后，僅僅改變狀態(tài)了的組件及其父組件被重新渲染。

1 前言

網(wǎng)頁(yè)性能最大的限制因素是瀏覽器重繪(reflow)和重排版(repaint)，React的虛擬DOM就是為了盡可能減少瀏覽器的重繪和重排版，從React的渲染過(guò)程看，避免不必要的渲染可以進(jìn)一步提高性能。

2 PureRender

React優(yōu)化方法中最常見(jiàn)的就是PureRender，PureRender的原理是重新實(shí)現(xiàn)shouldComponentUpdate生命周期方法，讓當(dāng)前傳入的state和props和之前的做淺比較，如果返回FALSE，組件就不執(zhí)行render方法，默認(rèn)情況返回TRUE。react-addons-pure-render-mixin插件允許我們?cè)贓S6 的classes語(yǔ)法中使用PureRender：

        import React,{component} from ‘react’;
        import PureRenderMixin from ‘react-addons-pure-render-mixin’;
        
        class App extends Component{
            constructor(props){
                super(props);
                //!!!
                this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
            }
        render(){
            return 
foo
;
            }
        }
3 Immutable Data

在傳遞數(shù)據(jù)時(shí)，可以通過(guò)Immutable Data進(jìn)一步提升組件的渲染性能，Immutable Data是針對(duì)可變對(duì)象和不可變對(duì)象所做的折衷。可變對(duì)象是指多個(gè)變量引用一個(gè)對(duì)象，這導(dǎo)致對(duì)象的time和value耦合，對(duì)象一旦改變無(wú)法重塑；不可變對(duì)象是指每次用到一個(gè)對(duì)象就進(jìn)行深復(fù)制，這導(dǎo)致內(nèi)存浪費(fèi)；Immutable Data實(shí)現(xiàn)的原理基于持久化數(shù)據(jù)結(jié)構(gòu)，也就是使用舊數(shù)據(jù)創(chuàng)建新數(shù)據(jù)時(shí)，舊數(shù)據(jù)依舊保存，而且為了避免深度復(fù)制，Immutable Data使用結(jié)構(gòu)共享，也就是說(shuō)，如果對(duì)象樹(shù)中的一個(gè)節(jié)點(diǎn)變化，只修改這個(gè)節(jié)點(diǎn)和受他影響的父節(jié)點(diǎn)，其他節(jié)點(diǎn)依舊共享。Immutable Data優(yōu)點(diǎn)體現(xiàn)在降低了可變數(shù)據(jù)帶來(lái)的時(shí)間和值的耦合；節(jié)省了內(nèi)存，可以實(shí)現(xiàn)數(shù)據(jù)的時(shí)間旅行，也就是說(shuō)數(shù)據(jù)可以重塑。

使用Immutable Data可以直接采用Facebook開(kāi)發(fā)的immutable.js庫(kù)，該庫(kù)具有完善API，并且和原生JavaScript對(duì)象對(duì)應(yīng)。Immutable Data可以和PureRender結(jié)合使用，前面提到，PureRender通過(guò)淺比較確定shouldComponentUpdate的返回值，但是淺比較可以覆蓋的場(chǎng)景不多，深比較成本昂貴。而Immutable.js提供了高效判斷數(shù)據(jù)是否改變的方法，只需要全等算符(===)和自帶的is()方法就可以知道是否執(zhí)行render方法，這個(gè)操作幾乎是零成本的，所以可以極大地提高性能。使用immutable data之后，僅僅改變狀態(tài)了的組件及其父組件被重新渲染。

        import React,{ commponent } from "react";
        import { is } from "immutable";
        
        class App extends Component {
            shouldComponentUpdate(nextProps, nextState){
                const thisProps = this.props || {}；
                const thisStae = this.state || {};
                if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
                    Object.keys(thisState).length !== Object.keys(nextState).length){
                    return true;
                }
                for (const keys in nextProps){
                   // !==判斷原生對(duì)象，is判斷immutable對(duì)象
                    if (thisProps[key] !== nextProps[key] ||
                            !is(thisProps[key], nextProps[key]))
                        return true;
                }
                for (const key in nextState){
                    if ( thisStae[key] !== nextState[key])||
                        !is(thisStae[key],nextState[key])
                    return true;
                }
            }
        }

問(wèn)題：Immutable Data可以和PureRender結(jié)合使用是簡(jiǎn)單的作用疊加嗎？?jī)?yōu)先級(jí)哪個(gè)更高呢？這種作用疊加有沒(méi)有性能損耗呢？我當(dāng)前的理解是，react-addons-pure-render-mixin插件引的PureRender有缺陷，因?yàn)闇\復(fù)制有時(shí)會(huì)導(dǎo)致比較失誤，immutable.js僅僅是彌補(bǔ)了這一問(wèn)題，反而增加了代碼量，那為什么不干脆將PureRender去掉，只用immutable.js呢？

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

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

相關(guān)文章

  • React學(xué)習(xí)之漫談React

    摘要：事件系統(tǒng)合成事件的綁定方式合成事件的實(shí)現(xiàn)機(jī)制事件委派和自動(dòng)綁定。高階組件如果已經(jīng)理解高階函數(shù)，那么理解高階組件也很容易的。例如我們常見(jiàn)的方法等都是高階函數(shù)。對(duì)測(cè)試群眾來(lái)說(shuō)，從質(zhì)量保證的角度出發(fā)，單元測(cè)試覆蓋率是 事件系統(tǒng) 合成事件的綁定方式 `Test` 合成事件的實(shí)現(xiàn)機(jī)制：事件委派和自動(dòng)綁定。 React合成事件系統(tǒng)的委托機(jī)制，在合成事件內(nèi)部?jī)H僅是對(duì)最外層的容器進(jìn)行了綁定，并且依賴(lài)...

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

  • react如何性能達(dá)到最大化(前傳)，暨react為啥非得使用immutable.js

    摘要：主要講述我一步一步優(yōu)化性能的過(guò)程。。才能將的性能發(fā)揮到極致要是各位看官用過(guò)一段時(shí)間的，而沒(méi)有用那么本文非常適合你。那么多么浪費(fèi)性能，好。。下一篇我講寫(xiě)，，如何用 一行代碼勝過(guò)千言萬(wàn)語(yǔ)。。這篇文章呢。。主要講述我一步一步優(yōu)化react性能的過(guò)程。。為啥要用immutable.js呢。毫不夸張的說(shuō)。有了immutable.js（當(dāng)然也有其他實(shí)現(xiàn)庫(kù)）。。才能將react的性能發(fā)揮到極致！要是...

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

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

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

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

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

  • react進(jìn)階漫談

    摘要：父組件向子組件之間非常常見(jiàn)，通過(guò)機(jī)制傳遞即可。我們應(yīng)該聽(tīng)說(shuō)過(guò)高階函數(shù)，這種函數(shù)接受函數(shù)作為輸入，或者是輸出一個(gè)函數(shù)，比如以及等函數(shù)。在傳遞數(shù)據(jù)的時(shí)候，我們可以用進(jìn)一步提高性能。 本文主要談自己在react學(xué)習(xí)的過(guò)程中總結(jié)出來(lái)的一些經(jīng)驗(yàn)和資源，內(nèi)容邏輯參考了深入react技術(shù)棧一書(shū)以及網(wǎng)上的諸多資源，但也并非完全照抄，代碼基本都是自己實(shí)踐，主要為平時(shí)個(gè)人學(xué)習(xí)做一個(gè)總結(jié)和參考。 本文的關(guān)鍵...

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

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

0條評(píng)論

閱讀需要支付1元查看
<