首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >useCallback 到底优化了什么?

useCallback 到底优化了什么?

作者头像
前端达人
发布2025-06-09 20:41:56
发布2025-06-09 20:41:56
21000
代码可运行
举报
文章被收录于专栏:前端达人前端达人
运行总次数:0
代码可运行

今天我们要聊一个听起来“高大上”,其实特别实用的 Hook —— useCallback

不仅如此,这一节也是前 16 天内容的 Hooks 综合实战回顾,我们将一起动手,构建一个「功能丰富」的组件,让 useState、useEffect、useRef、useMemo、useCallback 全部上场!

🔍 useCallback 是干嘛的?

简单说:记住一个函数,别让它每次组件重新渲染时都“变脸”。

在 JS 中,函数是“引用类型”,每次函数组件执行(也就是重新渲染),函数定义也会重新生成。即使你写的是一样的函数,它也是一个“新函数”。

useCallback 的目的:如果依赖没变,就不要重新生成这个函数。

💡 举个例子:没用 useCallback 时的尴尬

想象下面这个场景👇

你有一个父组件,传了个 handleClick 函数给子组件。子组件用 React.memo 包了起来,想让它只在 props 变了的时候重新渲染。

结果你每次渲染都传了一个“新函数”,子组件每次都重新渲染 —— 优化白做。

这时候就要用 useCallback 👇

代码语言:javascript
代码运行次数:0
运行
复制
const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []);

空依赖数组代表:这个函数只会在初次渲染时生成一次,之后每次渲染都复用它。

🧠 useCallback 的语法和依赖数组

代码语言:javascript
代码运行次数:0
运行
复制
const memoizedFn = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
  • 第一个参数是你要“记忆”的函数体
  • 第二个参数是“依赖项数组”
  • 当依赖项 a 或 b 改变时,这个函数才会被重新生成

📌 和 useMemo 很像,但 useMemo 是记住“值”,useCallback 是记住“函数”。

🎯 核心场景:避免不必要的子组件重渲染

搭配 React.memouseCallback 的作用才最明显:

代码语言:javascript
代码运行次数:0
运行
复制
const Parent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  return <Child onClick={handleClick} />;
};
代码语言:javascript
代码运行次数:0
运行
复制
const Child = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Click me</button>;
});

✅ 如果不用 useCallback,每次渲染 handleClick 都变,Child 也重渲染。

✅ 如果用了 useCallback,函数是稳定引用,Child 就不会白白更新。

🆚 useCallback vs useMemo 有啥不同?

特性

useMemo

useCallback

记忆的对象

一个值/计算结果

一个函数引用

使用场景

缓存昂贵计算

缓存事件处理函数/回调

返回值

函数

小贴士:用 useCallback 相当于 useMemo(() => fn, deps) 的语法糖。


🧪 综合实战挑战:构建一个多 Hook 的组件!

🛠️ 任务:写一个「可加载数据的计数器组件」

  • 用 useState 管理 count 和 loading 状态
  • 用 useEffect 模拟数据加载
  • 用 useRef 聚焦按钮
  • 用 useMemo 计算派生数据(例如是否是偶数)
  • 用 useCallback 创建事件处理函数(比如按钮点击)
  • 尝试任意一种样式方法(Tailwind / CSS Module / Emotion)

👉 这个练习就是我们 17 天的成果大汇总!可以用这个项目当作“毕业作业”。

📚 Hooks 快速回顾(前 16 天回忆杀)

Hook

作用

useState

最基础的状态管理

useReducer

管理复杂/结构化状态

useEffect

副作用管理:数据请求、订阅、DOM 操作等

useRef

保留可变值、不触发渲染;也可以获取 DOM

useMemo

缓存计算结果,避免重复计算

useCallback

缓存函数引用,避免函数“变脸”

✨ 全都掌握了吗?可以在项目中任意组合了吗?能记得啥时候该用谁了吗?

📌 总结时间:useCallback 什么时候用?

✅ 适合:

  • 函数作为 prop 传给子组件
  • 子组件使用了 React.memo
  • 你确实遇到了性能问题 or 不必要的重渲染

❌ 不适合:

  • 函数本身很轻量,不会影响性能
  • 没有作为 prop 传递的需求

🔔 记住一句话:优化是有成本的,用在对的场景才有价值。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-05-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端达人 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 🔍 useCallback 是干嘛的?
  • 💡 举个例子:没用 useCallback 时的尴尬
  • 🧠 useCallback 的语法和依赖数组
  • 🎯 核心场景:避免不必要的子组件重渲染
  • 🆚 useCallback vs useMemo 有啥不同?
    • 🧪 综合实战挑战:构建一个多 Hook 的组件!
  • 📚 Hooks 快速回顾(前 16 天回忆杀)
  • 📌 总结时间:useCallback 什么时候用?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档