state有時候很不聽話，在某些時候，我不想他渲染，偏偏react非常智慧的幫我們重複渲染。

比如最常見的就是傳遞的物件為空，元件依舊渲染了一次或者多次。

更多場景不舉例了，對症下藥。

shouldComponentUpdate是react提供的生命週期函式，他發生在接收到新的props的時候。 簡單介紹一下各個生命週期函式。

componentWillMount：元件掛載之前執行，只執行一次

componentDidMount: 元件渲染完成，只執行一次

=======================================================

componentWillRecevieProps: 元件將要接收新的props執行

shouldComponentUpdate: 判斷元件是否應該重新渲染，預設是true

componentWillUpdate: 元件將要重新渲染

componentDidUpdate: 元件重新渲染完成

=======================================================

componentWillUnmount: 解除安裝元件
 

元件生命週期是有順序的，首先掛載元件，掛載成功完成第一次渲染，然後傳遞新的props，則會觸發componentWillRecevieProps，執行重新渲染的週期，直至渲染完成。

簡單版本

在你的元件內部加上這段程式碼

component.js

shouldComponentUpdate(nextProps, nextState) {
    if (_.isEqual(this.props, nextProps) || !_.isEmpty(this.props)) {
        return false
    }
    return true
}

這裡用到了_.isEqual和_.isEmpty，_.isEqual判斷當前傳進來的值和下一次傳遞的值是不是相等，是則返回true，_.isEmpty判斷當前傳遞進來的物件是不是為空，為空則返回true。

_.isEqual和_.isEmpty是 lodash 外掛裡面的函式，這是個輕巧的JavaScript函式外掛，可以處理多種常見的資料操作，當然還有一個更多功能的外掛。

在你的react專案的入口js匯入lodash，因為lodash函式是全域性的，所以只需要在入口匯入一次即可。

安裝

npm install --save lodash

app.js

import ‘lodash’

高階版本

還有一種更加高階好用的寫法，除了比較props之外，我們同時需要比較state是否更新。

if (!_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState)) {
   return true
} else {
   return false
}
 

其他寫法

如果元件結構比較簡單，你可以使用React.PureComponent的方式建立元件。