何时使用 useCallback、useMemo 和 useEffect？

2026-02-09 02:42:41 0条评论 2次阅读 0人点赞

useCallback Hook 用于对函数进行记忆化处理，以防止不必要的重新渲染；而 useMemo 用于记忆化计算输出；useEffect 则用于在 React 应用中执行副作用操作。

useCallback、useMemo 和 useEffect 都用于优化性能和管理基于 React 的应用在函数组件重新渲染之间的副作用。要回答何时使用 useCallBack、useMemo 和 useEffect，我们需要先确切了解它们的作用以及它们之间的区别。

前置知识：

useCallback 是一个 React Hook，它接收一个函数和一个依赖项列表作为参数，并返回一个记忆化的回调函数。当一个组件将回调传递给其子组件以防止子组件渲染时，这非常有用。只有当依赖项列表中的某一项发生变化时，它才会改变回调函数。
useMemo 与 useCallback Hook 类似，因为它也接受一个函数和一个依赖项列表，但它返回的是传入函数执行后的记忆化值。只有当其依赖项之一发生变化时，它才会重新计算该值。当返回的值不会发生变化时，这对于避免在每次渲染时进行昂贵的计算非常有用。
useEffect Hook 帮助我们在所有组件渲染完毕后，执行变更、订阅、定时器、日志记录以及其他副作用操作。useEffect 接受一个命令式性质的函数和一个依赖项列表。当其依赖项发生变化时，它会执行传入的函数。

0.1 创建 React 应用以理解这三个 Hook 的步骤
0.2 现在让我们来理解这三个 Hook 的工作原理

1 Computed: {computedValue}
2 Computed: {computedValue}
- 2.1 2026 前沿视角：何时真正需要优化？
- 2.2 总结与最佳实践

创建 React 应用以理解这三个 Hook 的步骤

步骤 1： 使用以下命令创建一个 React 应用（在现代开发中，我们更倾向于使用 Vite，但为了教程的通用性，这里展示经典流程）：

npx create-react-app usecallbackdemo

步骤 2： 创建项目文件夹（即 foldername）后，使用以下命令进入该文件夹：

cd usecallbackdemo

项目结构：

!image项目结构

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

现在让我们来理解这三个 Hook 的工作原理

1. usecallback:

它依赖于引用相等性。在 JavaScript 中，函数是“一等公民”，这意味着函数就是一个常规对象。因此，两个函数对象即使共享相同的代码，也是两个不同的对象。只需记住，函数对象在引用上仅等于其自身。

示例： 在 App.js 和 List.js 文件中编写以下代码

JavaScript

CODEBLOCK_6dcc66c1

JavaScript

CODEBLOCK_40007161

问题分析：

在这个例子中，每当我们切换 INLINECODE4c430874 状态（点击按钮）时，INLINECODEde81a5fd 组件都会重新渲染。由于 INLINECODEb7dfcabb 是在组件内部定义的函数，每次渲染都会创建一个新的函数实例（引用改变）。这会导致传递给 INLINECODE2955793d 的 props 发生变化，进而触发 INLINECODEe52e53cb 中的 INLINECODEa53a2266 不必要地再次运行。这在 2026 年的现代应用中可能会导致昂贵的网络请求或计算被浪费触发。

解决方案（2026 版最佳实践）：

在我们现代的开发工作流中，无论是使用 Cursor 这样的 AI IDE 还是传统的 VSCode，我们都会利用 useCallback 来锁定函数的引用。

让我们修改 App.js：

import React, { useState, useCallback } from "react";
import List from "./List";

function App() {
    const [input, setInput] = useState(1);
    const [light, setLight] = useState(true);

    // 使用 useCallback 包装函数
    // 只有当 input 发生变化时，getItems 才会重新创建
    const getItems = useCallback(() => {
        return [input + 10, input + 100];
    }, [input]); 

    const theme = {
        backgroundColor: light ? "White" : "grey",
        color: light ? "grey" : "white"
    }

    return 
        
             setInput(parseInt(event.target.value))} />
            
            
            
        
    ;
}

export default App;

现在，当你切换主题时，INLINECODE089e1aa4 的引用保持不变，INLINECODE84cbb8c0 组件的副作用不会再次触发，性能得到了优化。

2. useMemo：优化昂贵的计算

想象一下，我们有一个处理大量数据的场景，比如在 AI 辅助的数据可视化仪表盘中。

import React, { useState } from "react";

function ExpensiveComponent({ number }) {
    // 假设这是一个非常耗时的计算，例如处理数万条数据
    // 如果我们在每次组件渲染（哪怕是无关状态的更新）时都运行它，界面会卡顿
    const computedValue = slowFunction(number); 

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

    return (
        
            Computed: {computedValue}
            
        
    );
}

function slowFunction(num) {
    console.log("Running slow computation...");
    // 模拟耗时操作
    for (let i = 0; i < 1000000000; i++) {} 
    return num * 2;
}

在这个组件中，点击“Count”按钮会触发状态更新，导致组件重新渲染，进而导致 slowFunction 再次运行，造成界面卡顿。

优化策略：

我们可以使用 useMemo 来缓存计算结果。

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

function OptimizedComponent({ number }) {
    // 只有当 number 变化时，才会重新计算
    const computedValue = useMemo(() => {
        return slowFunction(number);
    }, [number]); 

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

    return (
        
            Computed: {computedValue}
            
        
    );
}

现在，点击 INLINECODE3977478e 按钮不会触发昂贵的计算，因为 INLINECODE2772c083 已经被缓存了，直到 number 发生变化。

3. useEffect：处理副作用的利器

useEffect 的核心在于处理那些渲染之外的操作：数据获取、订阅、手动修改 DOM 等。

常见陷阱：

我们经常看到初学者忘记设置正确的依赖数组，导致无限循环或闭包陷阱。

useEffect(() => {
    const interval = setInterval(() => {
        console.log(‘Tick‘);
    }, 1000);
    
    // 清理函数：组件卸载或依赖变化时执行
    return () => clearInterval(interval); 
}, []); // 空数组表示仅在挂载时运行一次

在我们的生产环境中，特别是在构建 AI 原生应用时，我们经常利用 useEffect 来与 WebSockets 保持连接，或者轮询后端 API 获取模型生成的状态。确保清理副作用（如取消请求或断开连接）对于防止内存泄漏至关重要。

2026 前沿视角：何时真正需要优化？

随着 React Compiler（React 编译器）在 2024/2025 年的推出并逐渐普及，以及 V8 引擎性能的飞跃，许多传统的手动优化（如到处滥用 useCallback）可能不再必要，甚至可能因为额外的内存开销而适得其反。

AI 辅助决策与“氛围编程”

在我们最近的团队实践中，我们发现与其纠结于每一个函数是否应该加 useCallback，不如关注整体的数据流架构。在使用 Cursor 等工具时，我们可以这样问 AI：“分析我的组件树，是否存在不必要的重渲染？”

决策指南：

默认不优化：先写出清晰的代码。Premature optimization is the root of all evil（过早优化是万恶之源）。
Profile（性能分析）驱动：使用 React DevTools Profiler 找出真正的瓶颈。如果父组件渲染导致子组件卡顿，再考虑优化。
传递给优化过的子组件：如果子组件使用了 INLINECODEdf113133，那么父组件传递回调时必须使用 INLINECODEc3a63667，否则 React.memo 会失效。
依赖项作为其他 Hook 的输入：如上所述，如果一个函数是 INLINECODEafb4abc3 的依赖项，那么它必须用 INLINECODE4eaa87eb 包裹。

Server Components 与边缘计算的影响

随着 React Server Components (RSC) 的成熟，我们将更多的计算逻辑移到了服务器端。这意味着客户端组件的职责变轻了，INLINECODEe86cef9e 和 INLINECODE9beeabe4 的使用频率可能会相应下降。如果我们的大部分数据获取和格式化都在边缘节点完成，前端的主要任务变成了展示和交互，这改变了我们对性能优化的思考方式。

总结与最佳实践

在这篇文章中，我们深入探讨了这三个 Hook 的核心用法。让我们总结一下在 2026 年的现代开发中，如何做出明智的选择：

useCallback: 当函数作为 props 传递给子组件（且该子组件已优化）或作为其他 Hook 的依赖项时使用。不要为了用而用。
useMemo: 当进行昂贵的计算（如大数组排序、复杂计算）且需要引用稳定性时使用。不要用来缓存简单的 JSX 创建。
useEffect: 处理所有副作用。永远不要忘记返回清理函数以防止内存泄漏，尤其是在处理 WebSocket 或定时器时。

最终，无论是手动优化还是依赖 React Compiler，理解这些 Hook 的工作原理将帮助我们更好地调试、维护和构建高性能的前端应用。结合现代 AI 工具，我们可以更自信地编写健壮的代码，将繁琐的优化工作交给工具，而让我们专注于创造出色的用户体验。

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

豆丁博客