React組件性能優化：PureRender和Immutable Data

megatron 發布于2019-08-20 14:42 / 611人閱讀

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

1 前言

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

2 PureRender

React優化方法中最常見的就是PureRender，PureRender的原理是重新實現shouldComponentUpdate生命周期方法，讓當前傳入的state和props和之前的做淺比較，如果返回FALSE，組件就不執行render方法，默認情況返回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

在傳遞數據時，可以通過Immutable Data進一步提升組件的渲染性能，Immutable Data是針對可變對象和不可變對象所做的折衷。可變對象是指多個變量引用一個對象，這導致對象的time和value耦合，對象一旦改變無法重塑；不可變對象是指每次用到一個對象就進行深復制，這導致內存浪費；Immutable Data實現的原理基于持久化數據結構，也就是使用舊數據創建新數據時，舊數據依舊保存，而且為了避免深度復制，Immutable Data使用結構共享，也就是說，如果對象樹中的一個節點變化，只修改這個節點和受他影響的父節點，其他節點依舊共享。Immutable Data優點體現在降低了可變數據帶來的時間和值的耦合；節省了內存，可以實現數據的時間旅行，也就是說數據可以重塑。

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

        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結合使用是簡單的作用疊加嗎？優先級哪個更高呢？這種作用疊加有沒有性能損耗呢？我當前的理解是，react-addons-pure-render-mixin插件引的PureRender有缺陷，因為淺復制有時會導致比較失誤，immutable.js僅僅是彌補了這一問題，反而增加了代碼量，那為什么不干脆將PureRender去掉，只用immutable.js呢？

云服務器 GPU云服務器性能優化優化系統性能網站性能優化頁面性能優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81846.html

React學習之漫談React

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

darkbug 2019-08-23 18:38 評論0 收藏0
react如何性能達到最大化(前傳)，暨react為啥非得使用immutable.js

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

jubincn 2019-08-19 17:22 評論0 收藏0
react進階漫談

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

neuSnail 2019-08-20 14:16 評論0 收藏0
react進階漫談

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

wyk1184 2019-08-30 15:52 評論0 收藏0
react進階漫談

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

junnplus 2019-08-01 16:17 評論0 收藏0