ReactuseMemo和useCallback做到性能优化

useMemo
useMemo用来缓存值，保存每次渲染时，不会发生变化的值，减少计算。在一些开销较大且值不会变的场景下特别有用。
useCallback
useCallback用来缓存函数。通常用于父子组件中，父组件传给子组件一个函数，父组件更新时，传递给子组件的函数也会被 重新创建。有时候传递给子组件的函数没必要重新创建，useCallback就可以缓存这个函数，不使这个函数重新被创建。

这两个hooks的作用就是进行数据缓存，避免页面重新渲染时不必要的参数重复更新。
它们的适用场景就是对于只需要单次进行复杂计算的内容进行数据存储，从而减少页面性能开销。
useMemo和useCallback两个hooks的出现，针对的痛点就是useEffect的执行时期是在页面渲染之后执行的，因此即使是不需要进行重复更新的参数，也会在页面重新渲染时再次更新，这是非常不友好的。当然，我们可以通过useEffect的第二个参数来阻止第一个参数的执行，但是它的执行时期仍然是页面渲染之后。
但useMemo和useCallback这两个hooks也有自己的缺点，那就是它们为了进行数据存储需要一直维护第二个参数，也就是依赖数组
useMemo返回的是一个变量的值，useCallback返回的是一个函数。对应到function组件最后要return的html代码部分，useMemo就是作为一个值来使用的，而useCallback则是被绑定到onClick上，作为要执行的函数。这就是它俩的本质区别。
hooks的useCallback
返回一个需要缓存的函数
传递需要更新的依赖项，一般回调函数内部使用的数据，都需要添加在依赖项中，避免父子之间，子级生成新的props函数，从而刷新子组件。
当父级组件传递给子级组件一个函数时，无状态组件每次都会重新生成新的props函数，导致子组件刷新，一般联合useMemo一起使用。

这篇好文章是转载于：学新通技术网