React Hooks 中的“记忆大师”：useCallback 探秘

React Hooks 中的"记忆大师"：useCallback 探秘

React Hooks 简介

在 React 的世界里，曾经类组件是管理状态和处理复杂逻辑的主力军，就像经验丰富的老工匠，虽然可靠但略显繁琐。而 React Hooks 的出现，就如同带来了一套全新的高效工具，让函数组件也能轻松拥有强大的能力。React Hooks 是 React 16.8 版本引入的新特性，它允许我们在不编写类组件的情况下，使用 React 的状态和其他特性 ，这极大地改变了 React 应用的开发方式。比如useState，它就像一个神奇的小盒子，能让函数组件轻松拥有自己的状态，以前需要在类组件中通过this.state和this.setState来管理状态，现在用useState几行代码就能搞定；useEffect则像是一个贴心的助手，帮我们处理副作用操作，比如数据获取、订阅事件等，它会在组件渲染后执行，让我们的代码逻辑更加清晰。而今天，我们要深入了解的useCallback，更是其中一位隐藏的 "性能优化大师"，接下来就让我们揭开它神秘的面纱。

useCallback 是什么

想象一下，你正在玩一款超级英雄养成游戏，每个超级英雄都有独特的技能。useCallback就像是超级英雄的 "技能记忆器"，它能记住超级英雄的技能，让这个技能在特定情况下保持不变 。在 React 里，useCallback是一个 Hook 函数，它的主要职责就是返回一个记忆化的回调函数。简单来说，它可以把你定义的函数 "存起来"，当组件重新渲染时，如果某些条件没有改变，就不会重新创建这个函数，而是继续使用之前存好的那个，就好像超级英雄不用每次战斗都重新学习技能一样，节省了大量的时间和精力。

从技术角度讲，useCallback接受两个参数：第一个参数是你要 "记忆" 的函数，也就是超级英雄的技能；第二个参数是一个依赖数组，它像是一个技能使用条件清单，只有清单里的内容发生变化时，useCallback才会返回一个新的函数，就好比只有当超级英雄的某些关键条件改变时，他的技能才会有新的变化，否则就一直用原来那招。比如下面这段代码：

import React, { useCallback } from'react';
function App() {
  const handleClick = useCallback(() => {
    console.log('按钮被点击了');
  }, []);
  return (
    <div>
      <button onClick={handleClick}>点击我</button>
    </div>
  );
}
export default App;

在这个例子里，handleClick函数被useCallback"记忆" 起来了，依赖数组是空的，这意味着无论组件怎么重新渲染，只要这个空数组里的内容没变（因为是空的，所以永远不会变），handleClick函数就不会重新创建，一直都是最初那个，这样就能避免一些不必要的性能损耗，是不是很神奇呢？

useCallback 的基本语法

useCallback的语法其实很简洁，就像搭建一个简单的积木结构 。它的基本语法如下：

const memoizedCallback = useCallback(() => {
  // 这里写你的函数逻辑
}, [/* 依赖数组 */]);

第一个参数，是你要记忆化的函数，这个函数就像是你精心制作的一个小工具，useCallback会把它好好 "保管" 起来 。第二个参数是依赖数组，它是一个数组，里面可以放一些变量或者值，这些变量就像是小工具运行的 "小助手"，只有当这些 "小助手" 发生变化时，useCallback才会重新生成一个新的函数，否则就继续使用之前保存的那个函数。比如下面这个简单的计数器例子：

import React, { useCallback, useState } from'react';
function Counter() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <p>当前计数: {count}</p>
      <button onClick={increment}>点击增加计数</button>
    </div>
  );
}
export default Counter;

在这个Counter组件里，increment函数被useCallback记忆化了，依赖数组里只有count。这意味着只有当count的值发生变化时，increment函数才会重新生成 ，如果count不变，不管组件怎么重新渲染，increment始终是同一个函数，这样就能减少一些不必要的性能开销，是不是很好理解呢？

useCallback 的使用场景

传递函数给子组件，避免重复渲染

想象你正在搭建一个乐高城市，每个乐高组件就像是 React 中的一个组件。有一个 "建筑展示" 子组件，它负责展示一座漂亮的乐高建筑，而这个子组件被React.memo包裹着，就像给这个乐高建筑加了一个保护罩，只有当它的props真正有变化时才会重新搭建（重新渲染）。而在父组件中，有一个 "拆除建筑" 的函数，这个函数就像是一个拆除指令，父组件需要把这个指令传递给 "建筑展示" 子组件，以便在需要的时候拆除建筑 。

如果不使用useCallback，每次父组件因为一些无关紧要的原因（比如旁边多放了一个乐高小人，也就是其他状态改变）重新渲染时，这个 "拆除建筑" 的函数就会被重新创建，虽然函数的功能没变，但它就像是一个新的指令，导致被React.memo保护的 "建筑展示" 子组件误以为有新的变化，从而不必要地重新搭建（重新渲染） 。

但要是使用了useCallback，就好比给这个 "拆除建筑" 的指令加上了一个记忆标签，只要记忆标签里的内容（依赖项）没有变化，这个指令就还是原来那个，不会因为父组件的一些小变动就变成新指令，这样 "建筑展示" 子组件就不会因为这个不变的指令而重新搭建，节省了搭建的时间和精力，也就是避免了不必要的重新渲染 。

下面来看具体代码：

import React, { useState, useCallback } from'react';
// 被React.memo包裹的子组件
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent 渲染');
  return (
    <button onClick={onClick}>点击我</button>
  );
});
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState('初始数据');
  // 使用useCallback缓存函数
  const handleClick = useCallback(() => {
    console.log('按钮被点击');
  }, []);
  const handleDataChange = () => {
    setData('新数据');
  };
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <p>数据: {data}</p>
      <button onClick={handleDataChange}>改变数据</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}
export default ParentComponent;

在这个例子中，ChildComponent是一个被React.memo包裹的子组件，ParentComponent是父组件。handleClick函数被useCallback记忆化，依赖数组为空，这意味着无论ParentComponent因为count变化或者data变化而重新渲染，handleClick函数始终是同一个引用 。当点击 "增加计数" 按钮或者 "改变数据" 按钮时，ParentComponent会重新渲染，但ChildComponent不会因为handleClick函数的引用变化而重新渲染，只有当handleClick函数依赖的内容发生变化时（这里没有依赖任何会变化的内容），ChildComponent才会因为handleClick的改变而重新渲染，这样就避免了很多不必要的性能损耗 。

用于依赖函数的 useEffect、useMemo

再回到乐高城市的例子，假设你在搭建一个乐高摩天轮，这个摩天轮需要定期转动（就像useEffect里的副作用操作，会在组件渲染后执行），而控制摩天轮转动的函数（就像useEffect依赖的函数）就像是摩天轮的动力指令。如果这个动力指令没有被useCallback记忆化，每次组件因为一些小变化（比如给摩天轮旁边加了个小装饰，也就是其他状态改变）重新渲染时，这个动力指令就会被重新生成，虽然摩天轮的转动逻辑没变，但useEffect会误以为这是一个全新的指令，从而导致摩天轮不必要地重新启动（useEffect重复执行副作用操作），可能会造成一些性能问题，甚至陷入无限循环，就好像摩天轮不停地启动停止，让人头晕目眩 。

而如果使用useCallback把这个动力指令记忆化，只要依赖的条件（比如摩天轮的电源是否接通，也就是依赖项）没有变化，这个指令就不会变，useEffect就能稳定地控制摩天轮按照正常节奏转动，避免了不必要的性能开销 。

同理，对于useMemo，如果计算某个值（比如计算摩天轮上所有乐高小人的总重量）依赖的函数没有被useCallback记忆化，每次组件渲染时函数的变化可能会导致这个计算过程不必要地重复进行，使用useCallback就能让useMemo更高效地工作 。

下面是一个useEffect依赖useCallback函数的代码示例：

import React, { useState, useCallback, useEffect } from'react';
function ExampleComponent() {
  const [count, setCount] = useState(0);
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  useEffect(() => {
    const interval = setInterval(handleIncrement, 1000);
    return () => clearInterval(interval);
  }, [handleIncrement]);
  return (
    <div>
      <p>当前计数: {count}</p>
    </div>
  );
}
export default ExampleComponent;

在这个代码里，handleIncrement函数被useCallback记忆化，依赖count。useEffect依赖handleIncrement，只有当count变化导致handleIncrement函数变化时，useEffect才会重新执行，避免了因为组件其他无关渲染而导致useEffect内的定时器逻辑不必要地重复设置和清理 ，让组件的行为更加稳定和高效 。

性能优化敏感场景

假如你正在开发一款超大型的 3D 乐高模拟游戏，游戏中有成千上万的乐高组件在屏幕上展示和交互，每一次的渲染和操作都对性能要求极高。在这个游戏里，有很多函数负责处理各种复杂的交互逻辑，比如乐高积木的拼接、拆除，场景的切换等 。

如果这些函数没有使用useCallback进行优化，每次用户进行一些操作（比如移动一下视角，也就是触发组件重新渲染），这些函数都会被重新创建，这会消耗大量的计算资源和时间，导致游戏卡顿，就好像你的电脑突然陷入了泥潭，运行不流畅。

但要是使用useCallback，把这些关键函数记忆化，只要它们依赖的条件没有变化，就不会重新创建，大大减少了不必要的计算开销，让游戏能够更加流畅地运行，就像给电脑装上了超级跑车的引擎，性能大幅提升 。

在实际的 React 项目中，像电商网站的商品列表页，可能会有大量商品数据展示，每个商品都有添加到购物车、查看详情等交互函数；或者在线文档编辑页面，有各种复杂的文本操作函数。在这些对性能要求较高的场景中，useCallback都能发挥重要作用，通过避免重复创建函数来提升性能，给用户带来更流畅的体验 。

代码示例展示

未使用 useCallback 的情况

import React, { useState } from'react';
// 被React.memo包裹的子组件
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent 渲染');
  return (
    <button onClick={onClick}>点击我</button>
  );
});
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState('初始数据');
  // 未使用useCallback的函数
  const handleClick = () => {
    console.log('按钮被点击');
  };
  const handleDataChange = () => {
    setData('新数据');
  };
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <p>数据: {data}</p>
      <button onClick={handleDataChange}>改变数据</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}
export default ParentComponent;

在上述代码中，ParentComponent每次重新渲染，handleClick函数都会重新创建。因为ChildComponent被React.memo包裹，当handleClick函数引用变化时，ChildComponent会误以为props改变而重新渲染 。比如当点击 "增加计数" 按钮时，count状态改变，ParentComponent重新渲染，handleClick函数重新创建，其引用发生变化，这就会导致ChildComponent不必要的重新渲染，在控制台中可以看到ChildComponent 渲染的日志被打印 。

使用 useCallback 优化后的情况

import React, { useState, useCallback } from'react';
// 被React.memo包裹的子组件
const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent 渲染');
  return (
    <button onClick={onClick}>点击我</button>
  );
});
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState('初始数据');
  // 使用useCallback缓存函数
  const handleClick = useCallback(() => {
    console.log('按钮被点击');
  }, []);
  const handleDataChange = () => {
    setData('新数据');
  };
  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <p>数据: {data}</p>
      <button onClick={handleDataChange}>改变数据</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}
export default ParentComponent;

在这段优化后的代码中，handleClick函数被useCallback记忆化，依赖数组为空 。这意味着无论ParentComponent因为count变化或者data变化而重新渲染，只要这个空依赖数组里的内容没变（因为是空的，所以永远不会变），handleClick函数始终是同一个引用 。当点击 "增加计数" 按钮或者 "改变数据" 按钮时，ParentComponent会重新渲染，但ChildComponent不会因为handleClick函数的引用变化而重新渲染，只有当handleClick函数依赖的内容发生变化时（这里没有依赖任何会变化的内容），ChildComponent才会因为handleClick的改变而重新渲染，在控制台中可以观察到，除了首次渲染外，后续ParentComponent重新渲染时，ChildComponent不会再重复渲染，从而避免了不必要的性能损耗 。

使用 useCallback 的注意事项

依赖数组的正确设置

依赖数组就像是给useCallback这个 "技能记忆器" 设定的触发条件，它的设置至关重要。如果依赖数组设置不正确，就好比给超级英雄的技能触发条件设置错了，可能会导致一些意想不到的问题 。

比如，下面这个错误设置依赖数组的案例：

import React, { useState, useCallback, useEffect } from'react';
function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('张三');
  const handleClick = useCallback(() => {
    console.log(count);
  }, []);
  useEffect(() => {
    handleClick();
  }, [handleClick]);
  return (
    <div>
      <p>计数: {count}</p>
      <p>姓名: {name}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <button onClick={() => setName('李四')}>改变姓名</button>
    </div>
  );
}
export default Example;

在这个例子中，handleClick函数依赖于count，但依赖数组中却没有包含count。这就导致当count发生变化时，handleClick函数并不会更新，useEffect也不会因为count的变化而重新执行，console.log(count)打印的始终是初始的count值 ，这显然不是我们想要的结果。

正确的做法是将count添加到依赖数组中，如下所示：

import React, { useState, useCallback, useEffect } from'react';
function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('张三');
  const handleClick = useCallback(() => {
    console.log(count);
  }, [count]);
  useEffect(() => {
    handleClick();
  }, [handleClick]);
  return (
    <div>
      <p>计数: {count}</p>
      <p>姓名: {name}</p>
      <button onClick={() => setCount(count + 1)}>增加计数</button>
      <button onClick={() => setName('李四')}>改变姓名</button>
    </div>
  );
}
export default Example;

这样，当count变化时，handleClick函数会重新生成，useEffect也会重新执行，console.log(count)就能打印出最新的count值 ，确保了函数的行为符合预期。

避免滥用

虽然useCallback是个强大的性能优化工具，但就像再锋利的宝剑也不能随意挥舞一样，我们不能在所有函数上都盲目使用它 。如果滥用useCallback，就好比在每个小任务上都派上超级英雄，不仅大材小用，还可能适得其反。

一方面，滥用useCallback可能会降低代码的可读性 。原本简单直接的函数定义，被useCallback包裹后，多了依赖数组的设置，增加了代码的复杂性，让其他开发者阅读和理解代码时需要花费更多的精力去分析依赖关系。比如下面这段代码：

import React, { useCallback } from'react';
function SimpleComponent() {
  const simpleFunction = useCallback(() => {
    console.log('这是一个简单函数');
  }, []);
  return (
    <div>
      <button onClick={simpleFunction}>点击执行简单函数</button>
    </div>
  );
}
export default SimpleComponent;

在这个简单的组件中，simpleFunction并没有依赖任何会变化的值，使用useCallback完全没有必要，反而让代码看起来更复杂了。

另一方面，滥用useCallback可能会带来不必要的性能开销 。useCallback在内部需要进行一些比较和处理来判断是否返回新的函数，虽然这些开销通常较小，但如果在大量不必要的地方使用，累积起来也会对性能产生一定影响。所以，在使用useCallback时，一定要谨慎判断，只有在真正需要优化性能的场景下使用，才能发挥它的最大价值 。

总结

useCallback就像是 React 应用性能优化工具箱里的一件秘密武器，它能帮我们巧妙地管理回调函数，避免不必要的性能损耗 。在传递函数给子组件时，useCallback与React.memo搭配使用，可以有效防止子组件因为函数引用变化而重复渲染，就像给子组件穿上了一件 "稳定护盾"；在useEffect和useMemo中，合理使用useCallback能确保依赖函数的稳定性，避免无限循环和不必要的重复操作，让组件的行为更加可靠 。

不过，使用useCallback时要特别注意依赖数组的设置，确保依赖项完整且正确，不然就可能出现函数行为不符合预期的情况；同时，也要避免滥用，只有在真正需要优化性能的场景下才使用，不然可能会适得其反，让代码变得复杂又低效 。

希望通过本文的介绍，大家能对useCallback的使用场景有更清晰的认识，在开发 React 应用时，能够像熟练的工匠使用工具一样，灵活运用useCallback，打造出高性能、高体验的 React 应用 。