【高频考点精讲】React Hooks使用指南：useEffect的依赖数组你真的用对了吗？

React Hooks使用指南：useEffect的依赖数组你真的用对了吗？

‍ 作者：全栈老李

更新时间：2025 年 5 月

‍ 适合人群：前端初学者、进阶开发者

版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们来聊聊React Hooks中那个让人又爱又恨的useEffect，特别是它的依赖数组——这个看似简单实则暗藏玄机的部分。

依赖数组是什么鬼？

useEffect的第二个参数是个数组，React官方管它叫"依赖数组"。说白了，就是告诉React："老哥，我这个effect里面用到了这些变量，它们要是变了你就重新跑一下这个effect"。听起来挺简单对吧？但坑就坑在，很多人要么忘了写，要么写不全，要么写多了。

useEffect(() => {
  // 这里写副作用代码
}, [依赖1, 依赖2]); // 这个数组就是依赖数组

全栈老李提醒：这个依赖数组就像是你女朋友的购物清单——少写一样回家就得跪键盘，多写一样钱包就得大出血。

三种依赖数组的写法

1. 空数组 []：我只想跑一次