【Q615】React.useMemo 与 React.useCallback 是如何进行性能优化的

[shfshanyue]

[Muralitob]

通过传入的依赖（浅比较）来确定是否返回新的值还是以前的值

[nnmax]

useMemo 和 useCallback 是 React 性能优化的一个手段之一。

useMemo 会记住回调函数返回的值，只有当它的依赖项改变的时候，才会重新计算。useMemo 应该用在一些计算量比较大的场景下，或者是使用它来缓存一些 JSX 对象来避免重渲染。

useCallback 其实是 useMemo 的语法糖，只不过它是用来缓存函数的，比如一个事件的回调函数。常见的使用场景是，一个较复杂的组件接收一个事件的回调函数，使用 useCallback 包装来避免函数的重新创建，从而导致函数的引用发生改变，引起复杂组件的重渲染（前提是该组件使用了 React.memo 或者是 shouldComponentUpdate API 来优化过）。

但是其实 useCallback 有一个非常大的问题，比如在回调函数中，依赖了一个 state，你就不得不在依赖项中添加这个 state，而恰巧这个 state 是频繁变化的值，就会导致回调函数每次都会重新创建，失去了缓存的意义。所以最近 React 团队创建了一个 RFC 专门来讨论这个问题。后面 React 会新增一个命名为 useEvent 的新 hooks 来解决这个问题。