眾所周知，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去學習。

此文章屬于個人一時見解，希望大家多多指教。

總結

以上是生活随笔為你收集整理的使用shouldComponentUpdate进行性能优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。