【面试准备-react】React.memo和useMemo、useCallback的区别

1、前言

在react中，性能优化的点有：

• 调用setState，就会触发组件的重新渲染，无论前后state是否相同
• 父组件更新，子组件也会自动更新

2、定义：

memo是一个高阶组件，它接收一个组件A作为参数并返回一个组件B，如果组件B的props(或其中的值)没有改变，则组件B会阻止组件A重新渲染。

useMemo()是一个react hook。使用useMemo()，我们阔以返回记忆值来避免函数的依赖项没有改变的情况下重新渲染。

3、memo和useMemo的区别：
1、react.memo()是一个高阶组件，我们可以使用它来包装不想重新渲染的组件，props没有变化，则不会冲性能渲染此组件
2、useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算

4、定义：

useCallback(): 传入两个参数：
callback（仅仅是个函数），并把要做事情的函数放在callback函数体内执行
deps 要做事情的函数需要引入的外部参数或者是依赖参
返回值： 一个memoized回调函数。在依赖参数不变的情况下，返回的回调函数是同一个引用地址
useCallback配合memo用于优化子组件的渲染次数

5、useMemo和useCallback的区别：
1、useCallback优化针对于子组件渲染，返回值是函数。
2、useMemo优化针对于当前组件高开销的计算。返回值是缓存的变量。

参考以下：
memo、useMemo及useCallback解析
彻底理解 React hook useCallback和useMemo的区别