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

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 <div calssName = {this.props.className}>foo</div>;
            }
        }

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呢？