在React函数组件中，useEffect是处理副作用的核心Hook，常用于数据请求、事件监听、DOM操作等场景，但不少开发者会发现useEffect中的逻辑会反复执行，甚至导致页面卡顿、请求重复发送等问题。理解它的运行机制和优化方法，是写出高性能React组件的关键。
useEffect的基础执行逻辑
useEffect接收两个参数，第一个是包含副作用逻辑的回调函数，第二个是可选的依赖数组。它的默认执行规则是：组件首次渲染完成后执行一次回调，之后每次组件重新渲染，都会重新执行回调。如果传入了依赖数组，只有当数组中的依赖项发生变化时，才会重新执行回调；如果传入空数组，回调只会在组件首次渲染后执行一次。
基础的useEffect使用示例如下：
import { useEffect, useState } from 'react';
function DemoComponent() {
const [count, setCount] = useState(0);
// 没有依赖数组，每次渲染都会执行
useEffect(() => {
console.log('每次渲染都会触发');
});
// 空依赖数组，只执行一次
useEffect(() => {
console.log('只执行一次');
}, []);
// 依赖count，count变化时执行
useEffect(() => {
console.log('count变化了，当前值：', count);
}, [count]);
return (
<div>
<p>当前计数：{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}useEffect重复触发的常见原因
1. 依赖数组设置不当
最常见的重复触发原因是依赖数组遗漏了回调中使用的变量，或者错误地添加了不必要的依赖。如果回调中用到了组件内的状态、props或者函数，却没有把它们加入依赖数组，React无法感知这些变量的变化，可能会导致逻辑使用旧值；如果加入了无关的依赖，比如每次渲染都会重新创建的对象或函数，就会导致依赖项频繁变化，触发重复执行。
2. 闭包陷阱导致的状态更新循环
useEffect的回调会捕获创建时的作用域变量，如果依赖项设置不正确，可能会出现闭包中拿到旧状态的情况，进而写出错误的状态更新逻辑。比如下面的例子，在useEffect中直接调用setCount(count + 1)，如果count是依赖项，每次更新后count变化又会触发useEffect，形成无限循环。
// 错误示例：会导致无限循环
useEffect(() => {
setCount(count + 1);
}, [count]);3. 内联函数或对象作为依赖
函数组件中，每次渲染都会重新创建内部函数和对象。如果把内联定义的函数或者对象直接作为useEffect的依赖，每次渲染都会生成新的引用，导致依赖数组认为值发生了变化，从而反复触发useEffect。比如下面的例子，handleClick每次渲染都是新的函数，加入依赖后就会重复执行。
function DemoComponent() {
const [data, setData] = useState('');
// 每次渲染都会创建新的handleClick函数
const handleClick = () => {
console.log('点击了按钮');
};
// handleClick作为依赖，每次渲染都会变化，导致重复执行
useEffect(() => {
console.log('handleClick变化了');
}, [handleClick]);
return <button onClick={handleClick}>点击</button>;
}useEffect性能优化实践
1. 正确设置依赖数组
首先确保所有在useEffect回调中使用的组件状态、props、函数都加入依赖数组，同时避免加入不必要的依赖。如果回调中只需要用到状态的最新值，也可以使用函数式更新来避免把状态加入依赖，比如修改上面的无限循环示例：
// 正确写法：使用函数式更新，不需要依赖count
useEffect(() => {
setCount(prev => prev + 1);
}, []); // 这里不需要依赖count，不会无限循环2. 用useCallback和useMemo缓存依赖
对于作为依赖的函数或者对象，可以使用useCallback缓存函数，useMemo缓存对象，避免每次渲染都生成新的引用。改造上面的内联函数依赖问题：
import { useEffect, useState, useCallback } from 'react';
function DemoComponent() {
const [data, setData] = useState('');
// 用useCallback缓存函数，依赖项为空时，函数只会创建一次
const handleClick = useCallback(() => {
console.log('点击了按钮');
}, []);
// 现在handleClick引用稳定，不会频繁触发useEffect
useEffect(() => {
console.log('handleClick变化了');
}, [handleClick]);
return <button onClick={handleClick}>点击</button>;
}3. 及时清理副作用
部分副作用需要在组件卸载或者下次副作用执行前清理，比如事件监听、定时器、数据请求取消等。可以在useEffect的回调中返回一个清理函数，React会在组件卸载或者依赖变化重新执行副作用前调用这个清理函数。比如下面的定时器清理示例：
function DemoComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prev => prev + 1);
}, 1000);
// 清理函数：清除定时器
return () => {
clearInterval(timer);
};
}, []); // 空数组，定时器只创建一次，组件卸载时清理
return <p>计时：{count}</p>;
}4. 拆分useEffect逻辑
不要把所有副作用都放在一个useEffect中，按照不同的依赖拆分多个useEffect，每个只处理对应依赖相关的逻辑，这样可以避免无关依赖变化导致整个副作用重复执行。比如数据请求和事件监听可以分成两个useEffect分别处理：
function DemoComponent({ userId }) {
const [userInfo, setUserInfo] = useState(null);
// 只依赖userId，userId变化才重新请求
useEffect(() => {
const fetchUser = async () => {
const res = await fetch(`https://ipipp.com/api/user/${userId}`);
const data = await res.json();
setUserInfo(data);
};
fetchUser();
}, [userId]);
// 事件监听单独拆分，依赖为空，只执行一次
useEffect(() => {
const handleResize = () => {
console.log('窗口大小变化了');
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <div>{userInfo ? userInfo.name : '加载中'}</div>;
}常见问题排查技巧
如果遇到了useEffect重复触发的问题，可以先检查三个点：一是回调中用到的所有变量是否都正确加入了依赖数组；二是依赖项中的函数、对象是否被缓存，引用是否稳定；三是副作用是否有需要清理的逻辑，是否遗漏了清理函数。也可以借助React开发者工具查看组件的渲染次数和Hook的依赖变化，快速定位问题原因。