使用shouldComponentUpdate進行性能優化

衆所周知，react中props,state值的變化，會致使組件從新渲染。使用shouldComponentUpdate就是爲了減小render沒必要要的渲染。 本文着重回答如下問題：

1：如何使用使用shouldComponentUpdate記性優化；

shouldComponentUpdate(nexrProps) {
    if (this.props.num === nexrProps.num) {
        return false
    }
    return true;
}

相信你們都知道這種方式，shouldComponentUpdate提供了兩個參數nextProps和nextState，表示下一次props和一次state的值，當函數返回false時候，render()方法不執行，組件也就不會渲染，返回true時，組件照常重渲染。此方法就是拿當前props中值和下一次props中的值進行對比，數據相等時，返回false，反之返回true。可是此方法面對複雜的對象時，就沒有效果了,好比說props長成這樣，就無法應對了，由於在js中，object，array，function屬於引用類型，即便改變其中數據，他們指向的仍是同一內存地址，因此採用上面的判斷就不行了。

obj: {
    age: 12,
    name: 'xioabbao',
    student: {
        count: 1
    }
}

2: 解決方法有三種：

（1）使用setState改變數據以前，先採用es6中assgin進行拷貝，可是assgin只深拷貝的數據的第一層，因此說不是最完美的解決辦法。

const o2 = Object.assign({},this.state.obj)
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

（2）使用JSON.parse(JSON.stringfy())進行深拷貝，可是遇到數據爲undefined和函數時就會錯。

const o2 = JSON.parse(JSON.stringify(this.state.obj))
    o2.student.count = '00000';
    this.setState({
        obj: o2,
    })

（3）使用immutable.js進行項目的搭建。immutable中講究數據的不可變性，每次對數據進行操做前，都會自動的對數據進行深拷貝，項目中數據採用immutable的方式，能夠輕鬆解決問題，可是又多了一套API去學習。

此文章屬於我的一時看法，但願你們多多指教。