作为一名前端工程师,我和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); // 组件卸载时清理
};
}, []);
五、实战坑点:我踩过的那些雷
-
无限循环 :
在useEffect中修改依赖项的状态,且未正确设置依赖数组:
jsx// 错误示范:setCount会导致重新渲染,重新渲染又触发useEffect...... useEffect(() => { setCount(count + 1); }, [count]);
-
闭包陷阱 :
在定时器或事件监听中访问到旧的state值:
jsxuseEffect(() => { const timer = setInterval(() => { console.log(count); // 永远是最初的count值 }, 1000); return () => clearInterval(timer); }, []);
解决方法:用
useRef
保存最新值,或通过函数式更新避免依赖。
六、总结:useEffect是副作用的"管家"
它不会让副作用消失,但能帮我们把它管得明明白白。记住几个关键点:
- 分离关注点:渲染逻辑和副作用逻辑分开。
- 控制执行时机:依赖数组是灵魂。
- 及时清理:避免内存泄漏。
最后送大家一句话: "用useEffect不是为了避免副作用,而是为了让它变得更可控。" ------ 来自一个被副作用折磨过无数遍的前端工程师。
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群:906392632
最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!