高级前端
react
【Q615】React.useMemo 与 React.useCallback 是如何进行性能优化的

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

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 633 (opens in a new tab)

Author 回答者: Muralitob (opens in a new tab)

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

Author 回答者: nnmax (opens in a new tab)

useMemouseCallback 是 React 性能优化的一个手段之一。

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

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

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