什么是useCallback？记忆化的函数

· 日常编程 · 283412

useCallback用于记忆化函数，避免组件重新渲染时函数引用变化导致子组件不必要的重渲染。它接收函数和依赖数组，仅当依赖项变化时返回新函数实例，常与React.memo配合优化性能，防止闭包陷阱需正确设置依赖，但不应过度使用，因有额外开销，适用于函数作为props传递至优化子组件的场景。

useCallback

是React提供的一个Hook，它的核心作用是记忆化（memoize）一个函数。简单来说，就是当你把一个函数作为props传递给子组件，或者这个函数本身被其他Hook（比如

useEffect

或

useMemo

）依赖时，

useCallback

可以确保这个函数在父组件重新渲染时，不会被“无缘无故”地重新创建，从而避免了不必要的子组件重新渲染或Hook的重复执行。

解决方案

在React中，每次组件重新渲染时，组件内部定义的函数都会被重新创建。这意味着，即使函数体本身没有变化，它的内存地址（引用）也会改变。这在大多数情况下不是问题，但当你将这个函数作为props传递给一个使用了

React.memo

（或类组件的

PureComponent

）进行优化的子组件时，问题就来了。

React.memo

会对其props进行浅比较，如果它收到的props与上次渲染的props在引用上相同，它就会跳过本次渲染。然而，如果一个函数prop在每次父组件渲染时都被重新创建，那么即使这个函数的功能完全一样，

React.memo

也会认为这个prop“变了”，从而导致子组件不必要的重新渲染。这无疑会抵消掉

React.memo

带来的性能优化。

useCallback

正是为了解决这个问题而生。它接收两个参数：一个要记忆化的函数，以及一个依赖项数组。

useCallback

会返回这个函数的记忆化版本。只有当依赖项数组中的某个值发生变化时，

useCallback

才会返回一个新的函数实例；否则，它会返回上一次渲染时记忆化的那个函数实例。

import React, { useState, useCallback, memo } from 'react';

// 一个使用React.memo优化的子组件
const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return ;
});

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  // 没有使用 useCallback 的函数，每次 ParentComponent 渲染都会重新创建
  // const handleClick = () => {
  //   setCount(count + 1);
  //   console.log('Button clicked, count:', count);
  // };

  // 使用 useCallback 记忆化的函数
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1); // 推荐使用函数式更新，避免将 count 加入依赖
    console.log('Button clicked, count:', count); // 注意：这里的 count 是定义时的值，如果需要最新值，用 prevCount
  }, []); // 依赖数组为空，表示这个函数只在组件初次挂载时创建一次

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  return (
    

      
Parent Count: {count}

      
      
      
Input Text: {text}

    

  );
}

export default ParentComponent;

在这个例子中，如果你不使用

useCallback

，每次你在输入框中输入内容（导致

ParentComponent

重新渲染），

ChildComponent

也会跟着重新渲染，尽管它的

onClick

逻辑上并没有变。但加上

useCallback

后，只要

handleClick

的依赖项（这里是空数组，意味着没有依赖）不变，

ChildComponent

就不会因为

onClick

引用的变化而重新渲染。

为什么在React中需要useCallback？

这是一个很常见的问题，尤其是在你开始关注应用性能的时候。我们知道JavaScript里的函数也是对象，它们有自己的内存地址。在React组件每次重新渲染时，组件内部定义的任何函数，都会被视为一个新的函数实例，即使它们的代码一模一样。这就像你每次去银行，银行都给你发一张新的会员卡，虽然卡上的信息没变，但那确实是张“新卡”。

对于那些没有经过优化的普通React组件来说，这通常不是问题，因为它们无论如何都会重新渲染。但当你的子组件使用了

React.memo

（或类组件的

PureComponent

）进行优化时，问题就浮现了。

React.memo

的工作原理是对props进行浅层比较。如果它发现传递给它的函数prop的引用变了，它就会认为这个prop“变了”，然后触发子组件重新渲染。即使这个函数的功能、它内部依赖的数据都没有实际变化，仅仅是引用变了，

React.memo

的优化效果就大打折扣了。

所以，

useCallback

的必要性，主要体现在它能帮助我们维护函数引用的稳定性。通过确保函数引用不变，我们可以有效地配合

React.memo

等工具，避免不必要的子组件重新渲染，从而提升应用的整体性能。尤其是在处理大量列表渲染、或者有复杂交互逻辑的组件时，这种优化能带来明显的流畅度提升。它不是一个万能药，但确实能解决特定场景下的性能瓶颈。

使用useCallback常见的误区或挑战有哪些？

尽管

useCallback

听起来很美好，但在实际使用中，它也常常会带来一些困惑和“坑”。

一个最常见的挑战就是依赖数组（dependency array）的处理。如果你忘记在依赖数组中包含函数内部使用的所有外部变量，你就会遇到“闭包陷阱”或者说“陈旧闭包”（stale closures）的问题。这意味着你的函数会捕获到它定义时的那个旧的变量值，而不是最新的值。比如，如果

handleClick

依赖于

count

，但你的依赖数组是

[]

，那么

handleClick

里面的

count

永远是组件初次渲染时的那个值。解决办法通常是将所有外部依赖都列入数组，或者，如果可以，使用函数式更新（如

setCount(prevCount => prevCount + 1)

）来避免对状态变量的直接依赖。

另一个误区是过度使用

useCallback

。不是所有的函数都需要被记忆化。

useCallback

本身也是有开销的，它需要额外的内存来存储记忆化的函数，并且每次渲染时都需要进行依赖项的比较。如果一个函数只是在组件内部使用，或者它被传递给一个没有经过

React.memo

优化的子组件，那么使用

useCallback

可能带来的性能提升微乎其微，甚至可能因为其自身的开销而导致负优化。判断是否需要用

useCallback

，一个简单的原则是：这个函数是否作为props传递给了

React.memo

包裹的子组件？或者它是否是另一个Hook（如

useEffect

, 

useMemo

）的依赖？如果都不是，那很可能就不需要。

再有，就是误以为

useCallback

能解决所有性能问题。它仅仅是解决了函数引用变化导致的重复渲染问题。如果你的组件因为其他原因（比如状态更新频繁、计算量大、DOM操作复杂）而性能不佳，

useCallback

可能帮不上忙。它只是React性能优化工具箱中的一个特定工具，需要结合具体场景来使用。有时候，性能问题可能出在组件结构本身，或者数据流设计上，这时候就不是一个

useCallback

能解决的了。

useCallback与useMemo、React.memo有什么关系？

这三个概念在React的性能优化领域里，就像是亲密的三兄弟，它们各自有分工，但又紧密协作。理解它们之间的关系，对于掌握React的性能优化至关重要。

首先，我们来说

React.memo

。它不是Hook，而是一个高阶组件（Higher-Order Component, HOC）。它的作用是包裹一个函数组件，然后对这个组件的props进行浅层比较。如果props在引用上没有变化，

React.memo

就会阻止这个组件重新渲染。它是性能优化的“守门员”，决定一个组件是否需要重新渲染。

接着是

useMemo

。这个Hook和

useCallback

是同胞兄弟，它们都用于记忆化（memoization）。但它们的记忆化对象不同：

useMemo

记忆化的是一个值。它接收一个函数和一个依赖数组，在依赖数组中的任何值发生变化时，它会重新执行这个函数并返回一个新的计算结果；否则，它返回上一次记忆化的结果。比如，你可以用它来记忆化一个计算开销很大的复杂数据结构，或者一个需要保持引用稳定的对象。

最后是我们的主角

useCallback

。它记忆化的是一个函数。从某种意义上说，

useCallback(fn, deps)

可以被看作是

useMemo(() => fn, deps)

的一个语法糖。

useMemo

返回的是

fn

执行后的结果，而

useCallback

直接返回

fn

这个函数本身，但保证了它的引用稳定。

它们之间的关系是这样的：

  • useCallback

    和

    useMemo

    ：它们都是为了提供“记忆化”能力，减少不必要的计算或对象/函数创建。

    useCallback

    是

    useMemo

    在函数记忆化场景下的特化版本。

  • useCallback

    和

    React.memo

    ：它们是最佳搭档。当

    React.memo

    包裹的子组件接收一个函数作为prop时，为了让

    React.memo

    的浅比较能够有效工作，这个函数就需要通过

    useCallback

    来记忆化，从而确保它的引用稳定。如果函数引用每次都变，

    React.memo

    就会失效。

所以，它们共同构成了一个性能优化的链条：

useCallback

确保传递给子组件的函数引用稳定 -> 

React.memo

利用这个稳定的引用来判断是否需要重新渲染子组件 -> 

useMemo

则可以记忆化其他复杂的值，进一步减少不必要的计算。它们一起，帮助我们构建更高效、更流畅的React应用。

以上就是什么是useCallback？记忆化的函数的详细内容，更多请关注骃骐网【www.myinqi.com】。

相关推荐：

Python中如何对NumPy数组执行快速幂运算_使用power函数实现向量化

np.power 比 快因底层C向量化实现，避免Python循环开销；支持out/where/dtype等参数，更安全可控；对负底数非整指数默认报错，而 静默返回nan；np.float_power专为负底数浮点指数设计。 为什么 np.power 比循环调用 ** 快得多 因为 np.power 是底层 C 实现的向量化函数，它一次性处理整个数组，避免 Python 循环开销和逐元素类型检查。而...

如何在Python中实现带参数的装饰器_通过三层函数嵌套传递外部参数

带参数的装饰器必须三层：外层接收参数并返回装饰器，中层接收函数，内层接收调用参数；不加@functools.wraps会导致__name__、__doc__等元信息丢失，影响调试、反射和IDE功能；参数校验应放在外层。 为什么带参数的装饰器必须用三层函数 因为 Python 的 @ 语法只接受一个可调用对象作为装饰器，而你传进去的 @log(level="DEBUG") 实际上是先执行 log(l...

如何在对象属性批量更新后仅执行一次回调函数

本文介绍一种优雅的 python 设计模式：通过私有属性 + 只读属性 + 显式 update() 方法，确保对象状态变更时回调函数（如数据校验、视图刷新等）仅被触发一次，避免重复计算，同时保持 ide 类型提示与代码可维护性。 本文介绍一种优雅的 python 设计模式：通过私有属性 + 只读属性 + 显式 update() 方法，确保对象状态变更时回调函数（如数据校验、视图刷新等）仅被触发一次...

Python中如何求NumPy数组的百分位数_使用percentile函数进行统计

numpy.percentile用于计算数组指定百分位数，关键参数包括a（输入数组）、q（0–100间百分位数）、axis（计算轴，默认None展平）；含NaN需设nan_policy='omit'；method控制插值方式；keepdims配合axis保留维度。 percentile函数的基本用法和参数含义 numpy.percentile 是计算数组中指定百分位数的主力函数，它不修改原数组，返...

如何确保对象属性批量更新后仅触发一次回调函数

本文介绍一种优雅的 Python 设计方案：通过禁用直接属性赋值 + 提供类型安全的 update() 方法，实现在多个属性变更后统一、且仅执行一次回调函数，兼顾 IDE 智能提示、代码可维护性与运行时可靠性。 本文介绍一种优雅的 python 设计方案：通过禁用直接属性赋值 + 提供类型安全的 `update()` 方法，实现在多个属性变更后统一、且仅执行一次回调函数，兼顾 ide 智能提示、代...

Python如何实现图的深度优先遍历_基于栈结构或递归函数实现

递归DFS栈溢出风险高因CPython默认递归深度仅1000，长链或环易触发RecursionError；隐式栈不可控，闭包和帧对象加剧内存开销；图应优先用显式栈实现。 递归实现DFS时，为什么栈溢出风险比预期高？ Python默认递归深度限制是1000层，图中存在长链或环状结构时极易触发RecursionError。这不是算法错，而是CPython解释器对递归调用的硬性约束。 用sys.setr...

如何使用Python中的calendar模块判断闰年_调用isleap函数

应直接使用 calendar.isleap() 判断闰年，它准确实现公历规则、线程安全、性能优且自 Python 2.3 起稳定兼容，避免手写逻辑出错或误用类型。 直接用 calendar.isleap() 判定闰年，别自己写逻辑 Python 的 calendar.isleap() 是最可靠、最省事的闰年判断方式。它封装了格里高利历（公历）全部规则：能被 4 整除但不能被 100 整除，或能被 ...

Python中如何获取当前正在运行的所有异步任务_使用asyncio.all_tasks函数

asyncio.all_tasks 返回当前事件循环中所有未完成的Task对象集合（set），为空常因未启动事件循环、无活跃循环、任务已完结或跨线程未正确设置循环。 asyncio.all_tasks 返回什么，为什么有时为空 asyncio.all_tasks 返回当前事件循环中所有未完成的 Task 对象集合（set），但它**只作用于当前线程中已运行且未关闭的事件循环**。常见误区是直接调用...

如何修复Python中NumPy不支持中文路径的问题_通过open函数读取字节流

NumPy的loadtxt等函数无法读取中文路径的根本原因在于其底层调用C标准库fopen时依赖系统默认编码（如Windows的GBK），而Python 3传递的是Unicode字符串，未做显式编码适配，导致OSError或UnicodeDecodeError；正确做法是用open('rb')读字节流，再经io.BytesIO包装后传入NumPy函数。 NumPy的loadtxt、genfromt...

Python内置函数有哪些_常用BIF如len/max/min/sum汇总

Python内置函数是类型协议的快捷入口，如len()调用__len__()、max()依赖__iter__()和比较方法，理解此机制可避免参数类型错误与兼容性问题。 Python内置函数不是“功能列表”，而是“类型协议的快捷入口” Python的内置函数（BIF）绝大多数不是独立实现的逻辑，而是对对象__len__、__iter__、__lt__等特殊方法的统一调用封装。比如len(x)实际触发...