聊聊useEffect:谁说副作用不能“优雅”?

作为一名前端工程师,我和useEffect的"爱恨情仇"简直能写一部连续剧。从最初觉得它"难以驯服",到如今逐渐摸清它的脾气,我花了不止一丢丢时间。今天就来聊聊这个React中最常用却又容易被误解的Hook------useEffect,以及它背后的"副作用"哲学。


一、什么是副作用?先别慌,没那么复杂!

很多人一听到"副作用"就想到"bug"或"不可控",但其实在编程中,副作用(Side Effect)指的是函数或组件在执行过程中,与外部世界发生的交互。比如:

  • 数据获取(API调用)
  • 手动修改DOM
  • 订阅事件
  • 设置定时器

这些操作都可能影响其他组件或全局状态,所以React把它们统称为"副作用"。而useEffect,就是React为我们提供的"副作用管理工具"。


二、useEffect:副作用的"安全屋"

useEffect的核心思想是:把副作用操作从主渲染逻辑中剥离出来,放到一个独立的空间去执行。这样既能保持组件的纯净性,又能灵活处理各种边界场景。

基本用法:

jsx 复制代码
import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 副作用逻辑:数据获取
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []); // 依赖数组为空,表示只在挂载时执行一次

  return <div>{data ? data.message : 'Loading...'}</div>;
}

三、依赖数组:useEffect的"开关控制器"

useEffect的第二个参数(依赖数组)决定了它何时执行。这里有几个经典场景:

1. 每次渲染都执行(不传依赖数组)

jsx 复制代码
useEffect(() => {
  console.log('我每次渲染都会跑一遍!');
});

2. 只执行一次(传空数组)

jsx 复制代码
useEffect(() => {
  console.log('我只在组件挂载时执行一次');
}, []);

3. 依赖变化时执行

jsx 复制代码
useEffect(() => {
  console.log('count变了,我得重新跑!');
}, [count]);

四、 cleanup:别忘了我!

如果副作用需要清理(比如取消订阅、清除定时器),useEffect允许返回一个清理函数:

jsx 复制代码
useEffect(() => {
  const timer = setInterval(() => {
    console.log('每秒蹦跶一次');
  }, 1000);

  return () => {
    clearInterval(timer); // 组件卸载时清理
  };
}, []);

五、实战坑点:我踩过的那些雷

  1. 无限循环

    在useEffect中修改依赖项的状态,且未正确设置依赖数组:

    jsx 复制代码
    // 错误示范:setCount会导致重新渲染,重新渲染又触发useEffect......
    useEffect(() => {
      setCount(count + 1);
    }, [count]);
  2. 闭包陷阱

    在定时器或事件监听中访问到旧的state值:

    jsx 复制代码
    useEffect(() => {
      const timer = setInterval(() => {
        console.log(count); // 永远是最初的count值
      }, 1000);
      return () => clearInterval(timer);
    }, []);

    解决方法:用useRef保存最新值,或通过函数式更新避免依赖。


六、总结:useEffect是副作用的"管家"

它不会让副作用消失,但能帮我们把它管得明明白白。记住几个关键点:

  • 分离关注点:渲染逻辑和副作用逻辑分开。
  • 控制执行时机:依赖数组是灵魂。
  • 及时清理:避免内存泄漏。

最后送大家一句话: "用useEffect不是为了避免副作用,而是为了让它变得更可控。" ------ 来自一个被副作用折磨过无数遍的前端工程师。

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群:906392632

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关推荐
IT_陈寒19 分钟前
Python 3.12 新特性实战:5个让你的代码效率提升50%的技巧!🔥
前端·人工智能·后端
Apifox20 分钟前
Apifox 8 月更新|新增测试用例、支持自定义请求示例代码、提升导入/导出 OpenAPI/Swagger 数据的兼容性
前端·后端·测试
weixin_5412999422 分钟前
VSCode: 从插件安装到配置,如何实现 Ctrl+S 保存时,完全按照 .eslintrc.js 中的 ESLint 规则自动格式化代码
javascript·ide·vscode
yw00yw23 分钟前
常见的设计模式
开发语言·javascript·设计模式
coding随想28 分钟前
最后的挽留:深入浅出HTML5 beforeunload事件
前端
叶浩成52031 分钟前
WebSocket实时通信系统——js技能提升
javascript·websocket·网络协议
亚里士多德芙40 分钟前
记录:离线包实现桥接
前端
车前端1 小时前
React 18 核心新特性解析
react.js
去伪存真1 小时前
用的好好的vue.config.js代理,突然报308, 怎么回事?🤔
前端
搞个锤子哟1 小时前
el-select使用filter-method实现自定义过滤
前端