React学习笔记：useCallback与useMemo

在react中，useCallback与useMemo的主要作用在于进行性能的一个优化，这两者要怎么使用呢？另外这两者之间又有什么关系？

在使用React时，当我们某一个值发生改变时，整个页面都会重新渲染一次，哪怕是一些没有任何变化的组件、函数都会被重新调用、渲染，这就造成了一很大的性能上的浪费，这个时候要想优化我们的页面性能，就需要用到我们的useCallback和useMemo这个两个hook来进行优化了，接下来就会说一下这两者的使用以及他们之间会有什么区别。

useCallback：

useCallback最基本的使用就是传入两个参数并且会返回一个记忆值（是一个函数），第一个参数传入的是一个函数就是需要优化的函数；第二个参数传入的是一个数组，这个数组里的值就是我们优化函数所依赖的一个值，只有这些值发生变化才会重新调用优化函数。下图是代码。

当点击切换按钮的时候，父组件包括所有的子组件都会重新渲染，但是切换按钮并不会影响到我们的MJButton组件，我们希望让这两个MJButton子组件在点击切换按钮的时候不重新渲染应该怎么办呢？


这个时候可以给这个MJButton组件包裹一层memo函数，这个时候通过memo的比较以后，页面只会重新渲染btn1而不会渲染被useCallback函数包裹的那个函数所对应的页面。这是因为每次重新渲染后，被传过去的 increment1 这个函数每次都是一个新的值，memo的作用就是将新旧props进行一个浅层比较来决定需不需要进行渲染，所以btn1就会被重新渲染。而被useCallback包裹的 increment2 函数，它由于所依赖的值 count 并没有改变，所以useCallback返回的值也就没有改变，所以传给子组件的值就没有改变，因此不会重新渲染。这就是 useCallback 进行的性能优化。

useMemo：

useMemo的用法与useCallback大致相同，也是传入两个参数并返回一个值，在依赖值不变的情况下，多次定义的时候，返回值都是相同的。以下是代码。

当我们点击切换按钮的时候 calNum 函数也会一起执行，但这不是我们想要的，我们只需要点击 +1 按钮的时候让 calNum 执行即可。


这里就可以运用useMemo来进行优化了。优化代码如下：

useCallback 与 useMemo 的区别：

useMemo 和 useCallback 接收的参数都是一样，都是在其依赖项发生变化后才执行，都是返回缓存的值，区别在于 useMemo 返回的是函数运行的结果，对返回值进行优化，可以是一个对象或者一个函数； useCallback 返回的是函数，只针对于函数进行优化。 返回的callback可以作为props回调函数传递给子组件。

useMemo也可以写成这样，相当于实现了useCallback。因为useMemo是对返回的值进行优化的，那么我们只需要让useMemo返回一个函数即可。