在React函数组件中，useEffect是处理副作用的核心Hook，常用于数据请求、事件监听、DOM操作等场景，但不少开发者会在使用中遇到它多次调用、导致数据重复加载的问题，理解它的运行机制是解决问题的关键。
useEffect的基础执行逻辑
useEffect接收两个参数，第一个是包含副作用逻辑的回调函数，第二个是可选的依赖数组。它的执行时机和依赖数组的设置直接相关：如果不传入依赖数组，回调函数会在每次组件渲染完成后都执行；如果传入空数组，回调函数只会在组件首次挂载完成后执行一次；如果传入包含具体状态的依赖数组，那么只有当数组中的状态发生变化时，回调函数才会重新执行。
基础的useEffect使用示例如下：
import { useEffect, useState } from 'react';
function UserList() {
const [userList, setUserList] = useState([]);
const [page, setPage] = useState(1);
// 不设置依赖数组，每次渲染后都会执行
useEffect(() => {
console.log('useEffect触发');
});
// 设置空依赖数组，仅挂载时执行一次
useEffect(() => {
console.log('组件首次挂载');
}, []);
// 设置依赖数组，page变化时执行
useEffect(() => {
console.log('page发生变化，当前页面：', page);
}, [page]);
return (
<div>
<button onClick={() => setPage(page + 1)}>下一页</button>
</div>
);
}多次调用与数据重复的常见成因
依赖数组设置不合理
最常见的场景是数据请求时没有正确设置依赖，或者遗漏了必要的依赖项。比如需要在组件挂载时请求用户列表，但是忘记设置空依赖数组，导致每次组件状态更新、重新渲染后都会发起一次请求，造成数据重复加载和多余的网络开销。
异步请求未做取消处理
当组件快速卸载又重新挂载时，之前发起的异步请求可能还在等待响应，等响应返回后尝试更新已经被卸载的组件状态，不仅会造成数据重复，还可能触发React的警告。如果多次触发请求，还可能出现旧的请求响应比新的晚返回，覆盖最新数据的问题。
闭包陷阱导致的重复执行
useEffect的回调函数会捕获当前渲染周期的闭包变量，如果依赖数组中遗漏了回调函数内部用到的状态，就可能因为闭包中拿到的还是旧值，导致逻辑不符合预期，甚至触发额外的执行。
对应的解决方案
正确设置依赖数组
首先要明确副作用逻辑需要用到的所有外部状态，把这些状态都加入到依赖数组中，避免遗漏。如果是仅需要在组件挂载时执行一次的副作用，比如初始数据请求，就设置空依赖数组。如果副作用逻辑不需要依赖任何状态，也可以设置空数组保证只执行一次。
正确的初始数据请求示例如下：
import { useEffect, useState } from 'react';
function UserList() {
const [userList, setUserList] = useState([]);
useEffect(() => {
// 模拟请求用户列表
const fetchUsers = async () => {
try {
const res = await fetch('https://ipipp.com/api/users');
const data = await res.json();
setUserList(data);
} catch (err) {
console.error('请求失败：', err);
}
};
fetchUsers();
}, []); // 空依赖数组，仅挂载时执行
return (
<ul>
{userList.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}使用清理函数取消无效请求
useEffect的回调函数可以返回一个清理函数，这个清理函数会在组件卸载或者依赖更新、副作用重新执行之前触发。可以利用这个特性，通过标记位来取消还未完成的异步请求，避免无效的状态更新。
带请求取消逻辑的示例如下：
import { useEffect, useState } from 'react';
function SearchList() {
const [keyword, setKeyword] = useState('');
const [resultList, setResultList] = useState([]);
useEffect(() => {
// 标记当前请求是否有效
let isCanceled = false;
const fetchSearchResult = async () => {
try {
const res = await fetch(`https://ipipp.com/api/search?q=${keyword}`);
const data = await res.json();
// 如果请求已被取消，不更新状态
if (!isCanceled) {
setResultList(data);
}
} catch (err) {
if (!isCanceled) {
console.error('搜索请求失败：', err);
}
}
};
if (keyword) {
fetchSearchResult();
}
// 清理函数，组件卸载或依赖更新时触发
return () => {
isCanceled = true;
};
}, [keyword]); // keyword变化时重新执行副作用
return (
<div>
<input
type="text"
value={keyword}
onChange={(e) => setKeyword(e.target.value)}
placeholder="输入搜索关键词"
/>
<ul>
{resultList.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}用useRef避免闭包问题
如果遇到闭包导致拿到旧状态的问题，可以使用useRef来保存可变值，useRef的current属性修改不会触发组件重新渲染，而且每次渲染都能拿到最新的值，避免在useEffect中因为闭包捕获旧值导致的逻辑异常。
使用注意事项
- 不要直接在useEffect的回调函数内部声明函数再调用，尽量把函数声明在useEffect外部，或者把函数也加入到依赖数组中，避免遗漏依赖。
- 如果副作用逻辑比较复杂，涉及到多个状态的变化，可以拆分多个useEffect，每个useEffect只处理一类相关的副作用，逻辑会更清晰。
- 尽量避免在useEffect中修改它依赖的状态，否则很容易造成无限循环的触发，比如依赖了count，又在副作用里setCount(count+1)，就会导致useEffect不断执行。