成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

megatron / 626人閱讀

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

1 前言

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

2 PureRender

React優(yōu)化方法中最常見的就是PureRender，PureRender的原理是重新實(shí)現(xiàn)shouldComponentUpdate生命周期方法，讓當(dāng)前傳入的state和props和之前的做淺比較，如果返回FALSE，組件就不執(zhí)行render方法，默認(rèn)情況返回TRUE。react-addons-pure-render-mixin插件允許我們在ES6 的classes語法中使用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ù)時，可以通過Immutable Data進(jìn)一步提升組件的渲染性能，Immutable Data是針對可變對象和不可變對象所做的折衷。可變對象是指多個變量引用一個對象，這導(dǎo)致對象的time和value耦合，對象一旦改變無法重塑；不可變對象是指每次用到一個對象就進(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ù)據(jù)依舊保存，而且為了避免深度復(fù)制，Immutable Data使用結(jié)構(gòu)共享，也就是說，如果對象樹中的一個節(jié)點(diǎn)變化，只修改這個節(jié)點(diǎn)和受他影響的父節(jié)點(diǎn)，其他節(jié)點(diǎn)依舊共享。Immutable Data優(yōu)點(diǎn)體現(xiàn)在降低了可變數(shù)據(jù)帶來的時間和值的耦合；節(jié)省了內(nèi)存，可以實(shí)現(xiàn)數(shù)據(jù)的時間旅行，也就是說數(shù)據(jù)可以重塑。

使用Immutable Data可以直接采用Facebook開發(fā)的immutable.js庫，該庫具有完善API，并且和原生JavaScript對象對應(yīng)。Immutable Data可以和PureRender結(jié)合使用，前面提到，PureRender通過淺比較確定shouldComponentUpdate的返回值，但是淺比較可以覆蓋的場景不多，深比較成本昂貴。而Immutable.js提供了高效判斷數(shù)據(jù)是否改變的方法，只需要全等算符(===)和自帶的is()方法就可以知道是否執(zhí)行render方法，這個操作幾乎是零成本的，所以可以極大地提高性能。使用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){
                   // !==判斷原生對象，is判斷immutable對象
                    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;
                }
            }
        }

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81846.html

相關(guān)文章

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

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

    darkbug 評論0 收藏0

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

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

    jubincn 評論0 收藏0

  • react進(jìn)階漫談

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

    neuSnail 評論0 收藏0

  • react進(jìn)階漫談

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

    wyk1184 評論0 收藏0

  • react進(jìn)階漫談

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

    junnplus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<