# 1.shouldComponentUpdate 可以通過重寫生命周期函數`shouldComponentUpdate`來加快所有這些操作。這個函數會在重新渲染之前觸發。 此函數的**默認實現返回`true`，讓React執行更新：** ~~~ shouldComponentUpdate(nextProps, nextState) { return true; } ~~~ 如果你知道在某些情況下你的組件不需要更新，你 **可以從`shouldComponentUpdate`中返回`false`，** 而不是跳過整個渲染過程，其中包括調用當前組件和下面的`render()`。 # 2.超能力之『不會突然變化的數據』 避免此問題的最簡單的方法就是避免將那些`可能突然變化的數據`作為你的props或state。 例如，上面的`click`方法里面使用`concat`代替`push`： ~~~ click() { this.setState(prevState => ({ count: prevState.words.concat(['zhangyatao']) })); } ~~~ ES6支持數組的`spread`語法可以讓這變得更容易。 如果您使用的是`Create React App`，那么此語法默認可以使用的。 ~~~ click() { this.setState(prevState => ({ words: [...prevState.words, 'zhangyatao'] })); } ~~~ 您還可以把那部分`有可能突然變化的數據`的代碼按照上面的方式給重寫下，從而以避免這種問題。 例如，假設我們有一個名為`colormap`的對象，我們要寫一個函數，將`colormap.right`改為`'blue'`。 我們可以寫： ~~~ function updateColorMap(colormap) { colormap.right = 'blue'; } ~~~ 要將上面的代碼寫成不會濡染改變的對象，我們可以使用`Object.assign`方法： ~~~ function updateColorMap(colormap) { return Object.assign(colormap, {right: 'blue'}); } ~~~ `updateColorMap`現在會返回一個新對象，而不是改變之前的舊對象。`Object.assign`在ES6中，需要`polyfill`。 有一個JavaScript提議來添加對象`spread`屬性，以便不會`突然變化`的更新對象： ~~~ function updateColorMap(colormap) { return {...colormap, right: 'blue'}; } ~~~ 如果使用`Create React App`，默認情況下`Object.assign`和對象`spread`語法都可用。 # 3.使用不突變的數據結構 `Immutable.js`是另一種解決這個問題的方法。 它提供不可變的，持久的集合，通過結構共享工作： * 不可變：一旦創建，集合不能在另一個時間點更改。 * 持久性：可以從先前的集合和類集合的突變中創建處一個新集合。 創建新集合后，原始集合仍然有效。 * 結構共享：使用盡可能多的與原始集合相同的結構創建新集合，從而將最低程度的減少復制來提高性能。