Golang

关注公众号 jb51net

关闭
首页 > 脚本专栏 > Golang > React useMemo 和 useCallback区别

React中useMemo 和 useCallback 的区别小结

作者：goDeep

本文主要介绍了ReactHooks中的useMemo和useCallback的区别与应用场景,useMemo用于缓存计算结果,useCallback用于缓存函数引用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧

前言

刚开始学习 React Hooks 时，我一直分不清 useMemo 和 useCallback。

因为它们长得非常像：

const value = useMemo(() => {
  return result
}, [])

const fn = useCallback(() => {
  console.log("hello")
}, [])

甚至依赖数组的写法都一样。

学习了一段时间后，我发现：

useMemo 缓存的是“值”，useCallback 缓存的是“函数”。

这是两者最核心的区别。

什么是 useMemo

useMemo 用于缓存计算结果。

语法：

const memoizedValue = useMemo(() => {
  return compute()
}, [deps])

例如：

const total = useMemo(() => {
  console.log("执行计算")

  return price * count
}, [price, count])

当：

price
count

没有变化时，

React 不会再次执行计算逻辑。

直接返回上一次缓存结果。

useMemo 解决什么问题

假设有一个商品列表：

const products = [...]

需要筛选：

const filteredProducts = products.filter(...)

如果组件频繁重新渲染：

setInputValue(...)

即使商品数据没变化，

filter 也会不断执行。

这时可以使用：

const filteredProducts = useMemo(() => {
  return products.filter(...)
}, [products])

避免重复计算。

什么是 useCallback

useCallback 用于缓存函数。

语法：

const memoizedFn = useCallback(() => {
  ...
}, [deps])

例如：

const handleClick = useCallback(() => {
  console.log("点击")
}, [])

依赖不变时，

返回同一个函数引用。

useCallback 解决什么问题

React 每次渲染时：

function App() {
  const handleClick = () => {}

  return <Child onClick={handleClick} />
}

实际上：

handleClick

会被重新创建。

即：

旧函数 !== 新函数

如果：

Child

使用了：

React.memo

那么仍然会重新渲染。

因为：

props变化了

此时可以使用：

const handleClick = useCallback(() => {}, [])

让函数引用保持不变。

最简单的记忆方法

记住一句话：

useMemo 缓存结果

useCallback 缓存函数

例如：

const total = useMemo(() => {
  return price * count
}, [price, count])

缓存的是：

100
200
300

这些计算结果。

const handleClick = useCallback(() => {
  console.log("hello")
}, [])

缓存的是：

function

本身。

Vue 开发者如何理解

如果你是 Vue 开发者。

可以这样记：

useMemo

类似：

computed

const total = computed(() => {
  return price.value * count.value
})

缓存计算结果。

useCallback

Vue 中没有完全对应概念。

因为 Vue 模板编译阶段已经做了很多优化。

React 更关注：

函数引用是否变化

所以才有 useCallback。

useMemo 和 useCallback 对比

对比项useMemouseCallback
缓存内容值函数
返回值计算结果函数
常见场景大数据计算传递事件函数
对应Vuecomputed无明显对应

一个常见误区

很多初学者会这样写：

const handleClick = useCallback(() => {
  console.log("hello")
}, [])

整个项目到处都是：

useCallback

实际上：

这样并不一定提升性能。

因为：

useCallback 本身也有维护成本。

React 需要：

如果函数很简单：

() => console.log("hello")

完全没必要使用。

什么时候应该使用

推荐使用场景：

useMemo

例如：

1000+
10000+

条数据处理。

useCallback

例如：

<Child onClick={handleClick} />

面试回答模板

如果面试官问：

“useMemo 和 useCallback 的区别是什么？”

我会这样回答：

useMemo 用于缓存计算结果，返回的是一个值；useCallback 用于缓存函数，返回的是一个函数引用。两者都依赖依赖数组控制是否重新生成。通常 useMemo 用于优化复杂计算，useCallback 用于避免函数重复创建，尤其是在 React.memo 场景下减少子组件不必要渲染。

总结

一句话记忆：

useMemo：

缓存计算结果。

useCallback：

缓存函数引用。

不要为了优化而优化，只有在组件存在实际性能问题时，再合理使用它们。

到此这篇关于React中useMemo 和 useCallback 的区别小结的文章就介绍到这了,更多相关React useMemo 和 useCallback区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文