React.memo

React.memo 是什么？
memo 是备忘录的意思。memoizing 是将值缓存起来的意思。
总的来说，React.memo 是利用缓存进行性能优化的。

高阶组件

React.memo 是 HOCs ，接收一个Component，返回一个Component。

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

如何提升性能

使用React.memo 包装一个组件，某些情况下会通过缓存来提升性能。React.memo 会检查 props 有无变化，如果没有变化，React会跳过render阶段，直接返回缓存的结果，从而提升性能。

仅检查props

React.memo 判断是否需要重新 render() 是通过比较 props 完成的。如果 React.memo 中包装的函数式组件内部包含 useState , useReducer , useContext 勾子，当 state 或 context 变化时该渲染还是会重新 render。

浅层对比

默认情况下，React.memo 只是浅层对比 props 中的复杂对象，如果想自定义比较方式，可以传入第二个参数，一个自定义的比较函数。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

React.memo 第一个参数是性能优化的目标组件，第二个参数是比较函数，通过 上一次 props 和这次 props 进行对比，如果返回 true ，表示 props 相同，不重新渲染。如果返回 false ,表示 props 不同，重新渲染。

函数式示例

//User组件
function User(props){
	return (
		<div>
			<p>{props.id}</p>
			<p>{props.name}</p>
			<p>{props.sex}</p>
		</div>
	);
}

//使用React.memo
export default React.memo(<User>,(prevProps,nextProps)=>{
	if(prevProps.name === nextProps.name){
		return true;
	}
	return false;
})

上面示例为手写，并未运行测试，就那个意思。使用 React.memo 对 User 组件进行性能优化，当 props 中的 name 变化时，重新渲染，当 name 没有变化时，不重新渲染，尽管 id , sex 都变了，也不重新渲染。

忠告

React.memo 的存在就是为了性能优化。
虽然第二个参数返回 true 或 false 可以控制是否渲染，但 React.memo 的目的并不是为了阻止渲染，不要用它做这个，可能产生 bug 。