浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别

---

前言

在现在的react开发中，我们经常会使用的一些比较型的hook，都是为了提升性能，起到优化的目的。但是不能为了用而用，这东西不是用的越多越好，要视情况而定。下面讲几个常用的，并对比之间的区别。

一、memo()与PureComponent类组件的区别

（1）memo()是后面hook时代推出的，等同于class component时代的PureComponent类组件，但有差别。memo()不传参数时，和PureComponent类组件效果一样，都是浅比较
（2）当传入参数时，memo()可进行深度比较，可利用第二个参数传参。在class 时代时，也可利用shouldComponentUpdate()进行深度比较。现在提倡用memo()，使用起来更方便

二、memo()与useMemo()的区别

（1）React.memo()针对的是整个组件间的状态比较
（2）假如我们只想组件的某个部分HTML代码不进行re-render,这时候就要使用useMemo()进行针对性比较，它接收一个依赖数组，只有当数组检测到变化时，才会进行re-render

三、useMemo() 和 useEffect() 的区别

（1）useMemo()是在渲染期间执行的，不能执行一些额外副操作，否则会造成死循环，反复操作dom元素，导致浏览器卡死。比如网络请求，setState等
（2）如果要执行一些"副作用"操作，就得使用useEffect()。这个函数主要是在DOM更改后执行副作用操作，即在渲染结束后执行

四、useMemo() 和 useCallback() 的区别

（1）useCallback和useMemo都是为了做数据缓存，useCallback返回一个函数，作为要执行的函数，useMemo返回一个值，用于使用
（2）useCallback() 主要作用于缓存一个回调函数，多用于父组件传递子组件的函数。仅当依赖值发生变更时，才会创建新的回调函数，避免了不必要渲染