[TOC]
# `React.PureComponent` 和 `shouldComponentUpdate()`
[REACT性能優化之PURECOMPONENT 和 MEMO使用分析](https://www.cnblogs.com/ldld/p/11107305.html)
# `React.memo`
隨著 hooks 出來后，更多的組件都會偏向于函數組件的寫法，`React.memo` 與`React.PureComponent`相似，它適用于**函數組件**，但不適用于類組件。
如果你的函數組件在給定相同 props 的情況下渲染相同的結果，那么你可以通過將其包裝在`React.memo`中調用，以此通過記憶組件渲染結果的方式來提高組件的性能表現。
這意味著在這種情況下，React 將跳過渲染組件的操作并直接復用最近一次渲染的結果。
~~~
// 子組件
export default function Son(props){
console.log('MemoSon rendered : ' + Date.now());
return (
<div>{props.val}</div>
)
}
~~~
上述跟 class 組件中沒有繼承 PureComponent一樣，**只要是父組件狀態更新的時候，子組件都會重新渲染**。所以我們用`memo`來優化：
~~~
import React, {memo} from 'react';
const MemoSon = memo(function Son(props){
console.log('MemoSon rendered : ' + Date.now());
return (
<div>{props.val}</div>
)
})
export default MemoSon;
~~~
默認情況下其只會對復雜對象做淺層對比，如果你想要**控制對比過程**，可以通過`React.memo`第二個參數傳入來實現：
~~~
function MyComponent(props) {
/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
如果把 nextProps 傳入 render 方法的返回結果與
將 prevProps 傳入 render 方法的返回結果一致則返回 true，
否則返回 false
*/
}
export default React.memo(MyComponent, areEqual);
~~~
注意點如下：
* 此方法僅作為性能優化的方式而存在。但請不要依賴它來“阻止”渲染，因為這會產生 bug。
* 與 class 組件中`shouldComponentUpdate()`方法不同的是，如果 props 相等，areEqual 會返回 true；如果 props 不相等，則返回 false。這與`shouldComponentUpdate()`方法的返回值相反。
# [如何提高你的 React 應用的性能](https://mp.weixin.qq.com/s/WIWnoVn0wJW1krBROU-klA)
# setState 詳解
http://www.php.cn/js-tutorial-398065.html
你真的理解 setState嗎？
# 當PureComponent遇上ImmutableJS ，讓React應用性能發揮到極致
http://www.wulv.site/2017-08-22/purecomponent-immutablejs.html
# React + Redux 性能優化（一）：理論篇
https://juejin.im/post/5a4ce1e76fb9a045204c9f6b
# [React 應用性能優化之 IMMUTABLE.JS](https://robin-front.github.io/2016/03/14/React-optimize-with-Immutable-js.html)
# 參考
[推薦幾個 React 性能優化工具](https://juejin.im/post/5eeec022e51d4573fe4075e1)
