React Hooks 性能优化实战:useCallback vs useEffect 解析

useCallback vs useEffect 的区别

1. useCallback 的作用

javascript 复制代码
const doFaceAuth = useCallback(() => {
  // 函数体
}, [dependencies]);
  • 目的缓存函数引用,避免每次渲染都创建新函数
  • 返回值 :返回一个函数
  • 执行时机不会自动执行,需要手动调用
  • 使用场景:作为事件处理器、传递给子组件的 props

2. useEffect 的作用

javascript 复制代码
useEffect(() => {
  // 副作用代码
}, [dependencies]);
  • 目的执行副作用(API调用、DOM操作、订阅等)
  • 返回值无返回值
  • 执行时机自动执行(组件挂载、依赖变化时)
  • 使用场景:数据获取、事件监听、清理工作

什么时候用 useEffect

✅ 适合 useEffect 的场景

javascript 复制代码
// 1. 数据获取
useEffect(() => {
  const fetchData = async () => {
    const res = await http.post('/api/wx/register/info/checkPharmacist');
    setPharmacist(res.data?.info);
  };
  fetchData();
}, []);

// 2. 事件监听
useEffect(() => {
  const handleResize = () => console.log('窗口大小变化');
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 3. 定时器
useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时执行');
  }, 1000);
  return () => clearInterval(timer);
}, []);

什么时候用 useCallback

✅ 适合 useCallback 的场景

javascript 复制代码
// 1. 事件处理器
const handleClick = useCallback(() => {
  console.log('用户点击了');
}, [someState]);

// 2. 传递给子组件的函数
const handleSubmit = useCallback((data) => {
  submitData(data);
}, [submitData]);

// 3. 依赖其他状态的函数
const calculateResult = useCallback(() => {
  return value1 + value2;
}, [value1, value2]);

总结

特性 useCallback useEffect
目的 缓存函数引用 执行副作用
执行 手动调用 自动执行
返回值 函数
适用场景 事件处理器、props传递 数据获取、监听、清理
相关推荐
南玖i2 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel2 小时前
Web发展与Vue.js导读
前端
YAY_tyy2 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_5 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801465 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿8 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.9 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js