深入理解 React useCallback Hook：原理、实战与性能优化指南

2026-02-13 01:10:34 0条评论 3次阅读 0人点赞

在日常的 React 开发中，我们经常会遇到这样一个看似棘手的问题：为什么父组件仅仅更新了自己的状态，并没有改变传递给子组件的数据，子组件却还是重新渲染了？这往往是因为我们传递给子组件的 props 中包含了函数，而在每次父组件渲染时，这些函数都会被重新创建，导致引用发生变化。

这正是 React 提供的 INLINECODEa776b266 Hook 大显身手的时候。在这篇文章中，我们将深入探讨 INLINECODEb23816f9 Hook 的工作原理、它如何解决不必要的性能开销，以及在实际项目中如何正确且高效地使用它。我们不仅要学会“怎么写”，更要理解“为什么要这么写”。

1 什么是 useCallback Hook？
2 问题场景：当不使用 useCallback 时会发生什么？
3 不使用 useCallback 的示例
4 解决方案：引入 useCallback Hook
5 使用 useCallback 优化后的示例
6 实战场景：配合 React.memo 优化子组件
7 父组件区域
8 高级技巧：函数式更新与依赖项陷阱
9 何时应该避免使用 useCallback？
10 最佳实践总结
11 结语

什么是 useCallback Hook？

简单来说，useCallback 不仅仅是一个工具，它是 React 性能优化工具箱中的一把利器。它的核心功能是对传入的回调函数进行“记忆化”。这意味着在组件的多次渲染周期之间，只要特定的依赖项没有发生变化，React 就会返回完全相同的函数引用，而不是创建一个新的函数。

这种机制在以下两种情况下至关重要：

作为 props 传递给经过优化的子组件：当子组件使用了 React.memo 进行包裹时，稳定的函数引用可以防止子组件进行不必要的无效渲染。
作为其他 Hook 的依赖项：例如在 INLINECODEd9bc686f 的依赖数组中包含一个函数时，使用 INLINECODEd2b76026 可以确保该函数不会在每次渲染时都触发副作用逻辑。

基本语法

让我们先来看一下它的基本语法结构，这非常简单：

const memoizedCallback = useCallback(() => {
  // 执行某些操作
  doSomething(a, b);
}, [a, b]);

在这里，我们需要关注两个部分：

第一个参数（函数）：这是我们希望被缓存的逻辑代码块。
第二个参数（依赖项数组）：这是一个控制“何时更新函数”的开关。只有当数组中的变量值发生变化时，useCallback 才会返回一个新的函数引用；否则，它将一直返回上一次缓存的那个函数。

问题场景：当不使用 useCallback 时会发生什么？

为了真正理解 INLINECODEaac95465 的价值，我们需要先面对没有它时的痛点。让我们构建一个简单的计数器应用。在这个例子中，我们将使用 JavaScript 的 INLINECODEfea2956b 数据结构来跟踪函数引用的唯一性。Set 的特性是它只存储唯一的值，这能帮助我们直观地看到函数引用是否发生了变化。

代码示例：未优化的性能问题

在这个场景中，我们维护了两个状态：INLINECODE7bde1cb0 和 INLINECODEb82a2007。

import React, { useState } from "react";

// 使用 Set 来存储函数引用，查看其唯一性
const funcSet = new Set();

const App = () => {
  const [prev, setPrev] = useState(0);
  const [num, setNum] = useState(0);

  // 每次组件重新渲染时，这三个函数都会被重新定义
  // 这意味着它们在内存中的地址（引用）每次都不一样
  const incPrev = () => setPrev(prev + 1);
  const decPrev = () => setPrev(prev - 1);
  const incNum = () => setNum(num + 1);

  // 将新创建的函数加入 Set
  funcSet.add(incPrev);
  funcSet.add(decPrev);
  funcSet.add(incNum);

  // 每次渲染弹出警告，显示 Set 中有多少个唯一的函数引用
  alert(funcSet.size);

  return (
    
      不使用 useCallback 的示例
      
        Prev: {prev}
        
        
      
      
        Num: {num}
        
      
    
  );
};

export default App;

深度解析代码行为

在这个示例中，我们使用 INLINECODEaf07c6ce 来管理 INLINECODEda545cf2 和 num 这两个状态变量。

函数的重新创建：请注意看 INLINECODE8b5903bd、INLINECODE0d9e80bd 和 INLINECODEb8700441 这三个函数。在 JavaScript 中，函数是对象。每次 INLINECODE7850b25b 组件函数重新执行（即重新渲染）时，这三个函数都会被重新声明。对于 JavaScript 引擎而言，const incPrev = ... 这行代码每次执行都生成了一个全新的对象。

Set 的增长：我们将这些新函数添加到 INLINECODE938fe29a 中。由于它们每次都是全新的引用，INLINECODE85850cc2 的大小会不断增长。每次点击按钮触发状态更新，组件重渲染，alert 弹出的数字就会增加 3。

性能隐患：这不仅仅是关于 INLINECODE0bf5c285 的大小。在实际的大型应用中，如果你将一个 freshly created（新创建的）函数传递给了一个经过 INLINECODE9a953a72 优化的子组件，子组件会认为 props 发生了变化（因为函数引用变了），从而被迫重新渲染，这直接导致了性能优化的失效。

解决方案：引入 useCallback Hook

现在，让我们使用 useCallback 来修复上述问题。我们的目标是：即使组件重新渲染了，只要相关的数据没有变，我们就不要创建新的函数。

代码示例：优化后的实现

import React, { useState, useCallback } from "react";

const funcSet = new Set();

const App = () => {
  const [prev, setPrev] = useState(0);
  const [num, setNum] = useState(0);

  // 使用 useCallback 包裹函数
  // 只有当 prev 发生变化时，incPrev 才会重新创建
  const incPrev = useCallback(() => setPrev(prev + 1), [prev]);
  const decPrev = useCallback(() => setPrev(prev - 1), [prev]);

  // 只有当 num 发生变化时，incNum 才会重新创建
  const incNum = useCallback(() => setNum(num + 1), [num]);

  funcSet.add(incPrev);
  funcSet.add(decPrev);
  funcSet.add(incNum);

  alert(funcSet.size);

  return (
    
      使用 useCallback 优化后的示例
      
        Prev: {prev}
        
        
      
      
        Num: {num}
        
      
    
  );
};

export default App;

优化效果分析

运行这段代码，你会发现明显的不同：

当我们点击 "增加 Prev" 按钮时，prev 状态改变。组件重渲染。

– INLINECODE093c21cf 和 INLINECODE610ffff9 因为依赖了 prev，所以会被重新创建。

– INLINECODE1b91fb4c 依赖的是 INLINECODEc06ae63d，而 INLINECODE1a2b10fa 没变，所以 INLINECODEbb56cff6 返回的是上一次缓存的函数引用。

– 因此，Set 的大小只会增加 2（因为有两个函数变了），而不是 3。

这正是我们想要的效果：按需更新。

通过这种方式，我们减少了垃圾回收的压力，更重要的是，为后续与子组件配合优化打下了基础。

实战场景：配合 React.memo 优化子组件

INLINECODE5f34a4fa 最经典的应用场景，是配合 INLINECODE6966cab7 来切断不必要的渲染传递链。这是一个非常有价值的实战技巧。

在这个例子中，我们构建一个父组件和一个子组件。

1. 父组件

父组件维护两个状态：一个是计数，另一个是不相关的文本状态。我们将把计数更新函数传递给子组件。

import React, { useState, useCallback } from ‘react‘;
import Child from ‘./Child‘; // 假设 Child 在另一个文件中

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

  // 核心优化点：
  // 如果我们不使用 useCallback，每次 text 改变导致 ParentComponent 重渲染时，
  // handleIncrement 都是一个新的函数引用。
  // 使用 useCallback 后，只要 count 的依赖逻辑不变（此处为空依赖或特定依赖），引用就保持不变。
  const handleIncrement = useCallback(() => {
    setCount((c) => c + 1); // 使用函数式更新，无需将 count 加入依赖
  }, []); // 空依赖数组表示这个函数永远指向同一个引用

  return (
    
      父组件区域
      当前计数: {count}
      
      {/* 这个输入框的更新会导致父组件重渲染，但不应该影响子组件 */}
       setText(e.target.value)} 
        placeholder="输入文字测试父组件渲染" 
      />
      



      {/* 传递被缓存下来的函数 */}
      
    
  );
}

export default ParentComponent;

2. 子组件

子组件使用 INLINECODEe31dfe3c 进行包裹。INLINECODE3311c0bb 会对 props 进行浅比较。如果 props 没变，它就不会重新渲染。

import React, { memo } from ‘react‘;

// 定义子组件
const Child = ({ onIncrement }) => {
  console.log(‘子组件渲染了！‘); // 我们可以通过控制台观察渲染次数

  return (
    
      子组件区域
      
    
  );
};

// 使用 memo 包裹子组件，进行性能优化
// 只有当 onIncrement 引用发生变化时，子组件才会重新渲染
export default memo(Child);

场景深度解析

在这个设置中，让我们看看发生了什么：

初始渲染：父组件渲染，子组件也渲染。
你在父组件输入框输入文字：父组件的 text 状态改变，触发父组件重新渲染。
关键点：由于我们在父组件中使用了 INLINECODEdd33bf98，INLINECODE09833f4e 的引用保持了稳定。
子组件的表现：INLINECODE21183b7a 检查到传递给 INLINECODE190921d0 的 onIncrement props 和上次一样（引用相等）。因此，子组件跳过了渲染过程。

如果我们移除 INLINECODEd96ad1b8，每次父组件输入文字，INLINECODEc52f258f 都会变，子组件就会收到一个新的 props 引用，从而导致不必要的重渲染。这在复杂应用中是巨大的性能浪费。

高级技巧：函数式更新与依赖项陷阱

在使用 useCallback 时，依赖数组的管理是一个难点。特别是当我们需要在回调中读取最新的状态时。

常见的错误写法

假设我们有一个计数器，我们想通过 useCallback 来增加它：

const [count, setCount] = useState(0);

// ❌ 可能导致闭包陷阱
const increment = useCallback(() => {
  setCount(count + 1);
}, [count]); // 我们必须把 count 加进依赖

虽然这样写是可以工作的，但并不完美。因为每次 INLINECODE11fb3066 变化，INLINECODE4c7c40cb 函数都会重新创建。如果这个函数被传递给了一个巨大的、渲染成本很高的子组件，那么子组件依然会因为 count 的每次变化而重渲染，这可能不是我们想要的。

最佳实践：函数式更新

React 的 setState 支持接收一个函数作为参数。这使得我们可以避免在依赖数组中包含状态，从而保持函数引用的极度稳定。

const [count, setCount] = useState(0);

// ✅ 更好的写法
const increment = useCallback(() => {
  // 这种写法让 React 内部处理状态获取
  setCount((prevCount) => prevCount + 1);
}, []); // 依赖数组为空！这个函数引用永远不变

这种写法的巨大优势在于： INLINECODEbe0aa6be 函数在组件的整个生命周期内只创建一次。这意味着把它传递给任何经过 INLINECODE113c5ac1 优化的子组件时，子组件几乎永远不会因为这个 prop 而重渲染。

何时应该避免使用 useCallback？

虽然 useCallback 很强大，但我们并不应该（也不需要）在每一个函数上都使用它。这就是所谓的“过早优化是万恶之源”。

不使用的理由

内存开销：useCallback 本身也需要内存来缓存函数。对于简单的、不传递给子组件且不被其他 Hook 依赖的函数，每次渲染重新创建的开销其实非常小，甚至小于缓存管理的开销。
代码复杂度：滥用 useCallback 会导致代码中充满大量的依赖数组，增加维护难度和出错的可能性（比如忘记添加依赖导致闭包旧值）。
未优化的子组件：如果子组件没有用 INLINECODE14e09ee5 包裹，那么父组件传递新函数还是旧函数，子组件都会重渲染。此时父组件用 INLINECODE54d66611 几乎没有任何效果。

最佳实践总结

为了帮助你决定何时使用它，我们可以遵循以下原则：

作为 props 传递时：当你将函数传递给纯组件（React.memo）或将其包含在另一个 Hook 的依赖数组中时，请务必使用。
作为依赖项时：如果一个函数在 INLINECODE405bdadb 中被调用，那么这个函数应该被 INLINECODE127b8552 包裹，以防止 effect 频繁触发。
保持引用稳定性：在将自定义 Hook 返回的函数暴露给外部组件时，使用 useCallback 可以保证引用稳定。

结语

在性能优化的道路上，理解 useCallback 是你从“会写 React”进阶到“精通 React”的重要一步。它不仅仅是一个 Hook，更是一种思维方式：关注数据的引用稳定性和渲染链路的控制。

通过合理使用 INLINECODEd7c67942 和 INLINECODEda5e2e60，我们可以显著降低应用中不必要的渲染次数，让界面响应更加丝滑。当然，记住我们刚才讨论的“何时不用它”，避免陷入过度优化的陷阱。希望这篇文章能帮助你更好地掌握这一强大工具，在你的下一个项目中写出高效的代码！

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客