React之ShouldComponentUpdate，PureComponent，React.memo，useMemo，useCallback理解

前言

react的一大难点就在于渲染这一块，react的父组件每次执行渲染，都会连带子组件一块进行渲染，但万一子组件的数据压根没变，就会多很多无谓的渲染操作，所以react给了非常多api让用户自己决定渲染的执行细节。这是跟Vue的不同点之一，Vue每个vue实例都会管理自己的数据，只有自己的data变量的改变引发的update才会渲染，也就不会有父子连带渲染的浪费情况出现。

1. ShouldComponentUpdate

这是最底层的api，用户可以高度定制自己的渲染时机，没什么好说的

2. PureComponent

这个api专门用于class组件，当一个组件的自身的state或者props对象没有变化时（浅比较），那么组件就不会执行渲染（各种生命周期，virtual node生成，diff算法，生成dom）

3. React.memo

这个api跟PureComponent的效果基本一样，最大特点是可以作用于function组件，而且接受第二个参数是一个比较函数，跟scu效果类似（万能！！）

---

对于函数组件而言，每次渲染，就相当于重新执行这个函数，而React.memo的效果就是直接让这个函数不要执行，但如果我们不用React.memo，那我们就已经无法避免这个函数的执行了，但同时我们又不希望函数组件的内部所有变量和局部函数都重新声明一遍（因为这样很浪费），所以就有了useMemo和useCallback

4.useMemo和useCallback这2个hooks

useMemo用于保存变量，useCallback用于保存函数