[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)
