如何通过 useMemo 和 useCallback 提升你的 React 应用性能

背景

在 React 中,useMemouseCallback 这两个 hook 是我们优化应用性能的有力工具。它们会返回 memoized 版本的值或函数,只在依赖项发生变化时才进行重新计算或定义。

Hook 介绍

useMemo

useMemo 的作用是返回一个 memoized 值,它接受两个参数:一个函数和一个依赖数组。只有当依赖项中的一个值变化,才会重新计算并返回新的 memoized 值。

javascript 复制代码
const memoizedValue = useMemo(
  () => computeExpensiveValue(a, b),
  [a, b],
);

上述代码例子中,useMemo 返回了一个 memoized 版本的 computeExpensiveValue(a, b) 函数结果,ab 改变时,才会重新计算。

举个例子

假设 computeExpensiveValue 是一个需要大量计算资源的函数,比如它需要计算斐波那契数列的第 n 项。在这种情况下,每次组件渲染时重新计算显然是一种资源浪费。通过使用 useMemo ,我们可以在 a 或者 b 变化时,才重新进行这种耗时的计算。

useCallback

useCallbackuseMemo 用法类似,不过它返回的是一个 memoized 函数。这在我们需要将函数作为 prop 传递给子组件时非常有用,避免由于父组件重渲染导致不必要的函数重新创建。

javascript 复制代码
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

在此代码例子中,useCallback 返回的是一个 memoized 版本的函数 () => doSomething(a, b),只有当 ab 发生变化时,才会重新创建新的函数定义。

举个例子

假设我们在一个父组件中定义了一个事件处理器,这个处理器依赖于父组件的一些 prop。如果我们每次在渲染父组件时都创建新的事件处理器,那么即使 prop 没有变化,子组件还是会进行不必要的重渲染。

为了解决这个问题,我们可以使用 useCallback 来 memoize 事件处理器,只有当依赖的 prop 变化时,才重新创建事件处理器。

建议

虽然 useMemouseCallback 都可用于提升性能,但我们需要谨慎选择使用场景。过度使用可能导致更多的计算开销。例如在计算新的函数或值的过程本身不需要很多计算资源,但由于频繁的依赖项检查和新值的计算,可能会导致性能反而下降。

总结

useMemouseCallback 是 React 提供的强有力的性能优化工具。掌握正确的使用场景和方式,可以有效地提升你的应用性能,而避免不必要的计算开销。

相关推荐
brzhang4 分钟前
当我第一次看到 snapDOM,我想:这玩意儿终于能解决网页「截图」这破事了?
前端·后端·架构
掘金安东尼9 分钟前
前端周刊433期(2025年9月22日–9月28日)
前端·javascript·github
万少20 分钟前
我的HarmonyOS百宝箱
前端
江城开朗的豌豆27 分钟前
uni-app弹层遮罩难题?看我如何见招拆招!
前端·javascript·微信小程序
江城开朗的豌豆31 分钟前
小程序生命周期漫游指南:从诞生到落幕的完整旅程
前端·javascript·微信小程序
亿元程序员35 分钟前
100个Cocos实例之双摇杆(57/100)
前端
Mike_jia37 分钟前
Kaniko:无特权容器镜像构建的革命者
前端
欧阳码农39 分钟前
忍了一年多,我做了一个工具将文章一键发布到多个平台
前端·人工智能·后端
Hy行者勇哥40 分钟前
软件开发中前端页面、后台管理页面、后端、数据中台的关系与开发流程
前端
江城开朗的豌豆44 分钟前
跨平台开发实战:我的小程序双端(iOS、安卓)开发指南
前端·javascript·微信小程序