React性能优化之useCallback、useMemo以及memo

一、前言

        性能优化算是老生常谈的话题了，大家都在讲，大家也基本能说出几条优化方案，尤其是hooks出来后，经常可以脱口而出：使用hooks中的memo、useCallback、useMemo进行优化，但是具体怎么做呢？实际开发中大部分情况下依旧裸奔——啥都没用。

       我算是比较幸运的，很久之前就有同事说子组件使用memo可以减少渲染，原理大概就是如果子组件的pros没有发生变化，则不会重新渲染子组件。听起来不错，用！但是对于useCallback和useMemo，实在是有些谜。跟着一些博客写出的代码做输出，看着确实是优化了，但是具体用到项目中呢？也试过，但是从输出结果来看，没啥用。

       本次只是简单总结下，知其然，不知其所以然。

二、使用

     1、memo 

• 使用对象：组件
•  使用条件：一般是在父组件中为需要用的子组件套上；
• 优点：减少子组件渲染次数，即当父组件有多个子组件时，使用memo，可以让没有props变化的子组件不渲染；
•  使用：

                               用memo包裹后的组件，同正常组件同样使用即可；

 2、useCallback

• 使用对象：函数
• 使用条件：父组件传给子组件的函数
• 优点：useCallback包裹的函数，相当于对函数做了缓存，当父组件重新渲染时，函数不会重新定义==》子组件不会重新渲染
• 使用： 

             如图：PageA改变，不会引起PageB的重新渲染

3、useMemo

• 使用对象：变量
• 使用条件：父组件传给子组件的变量         
•  优点：useMemo包裹的变量，相当于对变量做了缓存，当父组件重新渲染时，变量不会改变==》子组件不会重新渲染
• 使用： 

       PageA改变，不会引起PageB的重新渲染

一句话总结：

      memo用于包裹子组件；useCallback和useMemo用于父组件向子组件传值时，即如果是组件内部自己用的函数和变量，不需要使用useCallback和useMemo。