在談到React優化的時候，shouldComponentUpdate方法是最簡單直接的優化方式。如果你在render方法中隨便打印一點東西（console.log(...)），你會發現console.log許多次，說明你的組件渲染了很多次。而在很多情況下你會發現有很多莫名其妙的打印，尤其是在層級比較深的組件中。

   如下圖：

tree.png

如果想只渲染紅色這一分支，如果不做優化，黃色部分是額外浪費渲染的部分。
你調用了setState或者傳入了不同的 Props 的時候，shouldComponentUpdate會默認全部返回true，React 就會重渲染組件。return false就是為了減少額外渲染的這部分。但是這個方法有個缺陷。就是如果你只想讓第一個紅色組件不重新渲染，而在這個組件上使用了return false，會導致其所有的子組件都不重新渲染。但這個顯然不是我們想要的效果。

   比較適合使用componentShouldUpdate組件是：使用只負責渲染的組件或者是組件樹中較深位置的組件。

shouldPureComponentUpdate方法是基于shouldComponentUpdate的一種比較當前 State 以及 Props 未來差異的方法。這個方法對對象進行了淺比較。什么是淺比較？舉個例子，如果一個數字從1變成了2，這個是可以比較出來的，如果是數組中一個項改變了，這個 是無法比較出來的。而深比較又會帶來一定的消耗。

如何減少比較來降低消耗？這就又要引入不可變數據結構（不可變數據是指一旦創建就不能被修改的數據）了。Immutable.js可以實現js的不可變數據。（太晚了，待續。。。。）