React优化

• useMemo、useCallback、React.memo()、React.PureComponent

useMemo与useCallback

两者都是缓存机制，不同的是，useMemo是对计算值的缓存，useCallback是对函数的缓存。

re-render

在一个组件中，state的变化会引起组件的重渲染（re-render），即使使用hooks的setstate方法更新state，也会引发re-render。

组件的re-render带来的问题：

1. 除了状态和声明周期初始化会保留，其它都会重新计算；
2. 父组件的re-render会引起子组件也跟着重渲染，即使子组件是个无状态组件，完全没有重新渲染的必要。

解决方法：

1. 第一个问题可以借助useMemo来解决。useMemo设计的初衷就是避免重复进行大规模计算，其作用对象是当前组件。如下代码：缓存了一个对象（第一个参数），count（第二个参数）变化才会更新这个对象。

const computeData = useMemo(() => ({
	count: count,
	name: 'Anita'
}), [count])

2. 第二个问题有三种解决方案： useCallback、React.memo、React.PureComponent

• useCallback useCallback的语法和useMemo类似，使用场景是父组件定义了一个函数，并将这个函数传给子组件，当父组件重新渲染时，会生成一个新的函数。这时候就可以使用useCallback，优化了传递给子组件的函数，只会初始化一次，不产生新的函数，无需额外开辟存储空间。
• React.memo 和 React.PureComponent React.memo和React.PureComponent类似，都是react16.6的一些包装函数的形式。不同点在于React.memo是用来包装函数组件，React.PureComponent是用来包装类组件。

function Child1(count) {
	console.log('render child1');
	return (
		<div>{ count }</div>
	)
};
export default React.memo(Child1);

React.memo可以接收两个参数，第一个参数是需要包装的纯函数子组件，第二个参数用来::深比较::props值，控制刷新，类似shouldComponentUpdate()。第二个参数不传时，默认进行浅比较。

class Child2 extends React.PureComponent {
	render (){
		console.log('render child2');
		return (
			<div>{ this.props.count }</div>
		)
	}
}