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传递 数据获取、监听、清理
相关推荐
一只一只妖1 小时前
突发奇想,还未实践,在Vben5的Antd模式下,将表单从「JS 配置化」改写成「模板可视化」形式(豆包版)
前端·javascript·vue.js
悟能不能悟3 小时前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶3 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
LFly_ice4 小时前
学习React-9-useSyncExternalStore
javascript·学习·react.js
gnip5 小时前
js上下文
前端·javascript
中草药z5 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)5 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休5 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel5 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端