useEffect 是 React 提供的一个很强大的 Hook，专门用来管理副作用。但它经常被误解为“状态监听器”或“变化触发器”，导致了代码冗余、性能问题甚至 bug。其实，useEffect 的本质非常简单：在渲染后处理副作用。只要抓住这个核心，很多使用上的困惑都能迎刃而解。
useEffect 的历史与设计初衷
在类组件时代，React 的副作用管理靠生命周期方法，比如 componentDidMount、componentDidUpdate 和 componentWillUnmount。这带来了很多问题：
-
逻辑分散：一个功能逻辑可能要分散在好几个生命周期方法里。
-
清理复杂：清理副作用的时候很容易出错，导致内存泄漏或错误行为。
-
难以复用：不同组件之间共享副作用逻辑不方便。
为了让开发者更容易写出清晰、简洁的代码，React 在 Hook 中引入了 useEffect。它用一个统一的接口解决了上述问题，让我们能更直观地定义和清理副作用。
常见使用场景
useEffect 通常用来做这些事情：
1. 数据获取
比如调用 API 获取数据，挂载时触发，卸载时清理。
function FetchData() {
const [data, setData] = React.useState(null);
useEffect(() => {
let isMounted = true;
fetch('/api/data')
.then((res) => res.json())
.then((result) => {
if (isMounted) setData(result);
});
return () => {
isMounted = false; // 防止异步更新导致问题
};
}, []); // 只在挂载和卸载时执行
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}
2. 事件监听
比如监听窗口大小变化，确保组件卸载后取消监听。
function WindowSize() {
const [size, setSize] = React.useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setSize(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize); // 清理副作用
};
}, []); // 只需要在挂载和卸载时执行
return <div>Window width: {size}px</div>;
}
3. 定时器管理
比如创建定时器，确保组件卸载时清理。
function Timer() {
const [count, setCount] = React.useState(0);
useEffect(() => {
const interval = setInterval(() => {
setCount((prev) => prev + 1);
}, 1000);
return () => {
clearInterval(interval); // 清理定时器
};
}, []); // 只在挂载时启动定时器，卸载时清理
return <div>Count: {count}</div>;
}
使用 useEffect 常见的误区
虽然 useEffect 很方便，但滥用或误用也不少见。以下是几种常见场景，以及如何优化它们。
1. 用 useEffect 计算派生状态
这是一个经典误用场景。比如，我们需要 b 是 a 的两倍，但用了 useEffect 来更新 b：
function DerivedState() {
const [a, setA] = React.useState(0);
const [b, setB] = React.useState(0);
useEffect(() => {
setB(a * 2); // 在副作用中计算 b
}, [a]);
return (
<div>
<button onClick={() => setA((prev) => prev + 1)}>Increment A</button>
<p>B: {b}</p>
</div>
);
}
为什么这是误用？
• b 本质上是可以从 a 派生出来的，没必要用 useState 和 useEffect 单独管理。
• 这样会增加代码复杂度，并且每次渲染都要触发额外的副作用。
更好的写法：
直接通过变量计算派生值。
function DerivedStateOptimized() {
const [a, setA] = React.useState(0);
const b = a * 2; // 直接计算，不存状态
return (
<div>
<button onClick={() => setA((prev) => prev + 1)}>Increment A</button>
<p>B: {b}</p>
</div>
);
}
2. 依赖数组不当导致性能问题
有时候，开发者会把不必要的依赖加进 useEffect 的依赖数组中，导致副作用被频繁执行。
function ExpensiveEffect({ a, b }) {
useEffect(() => {
console.log('Effect executed');
// 一些昂贵的计算
}, [a, b]); // 每次 a 或 b 变化都会触发
}
如何优化？
• 如果计算逻辑可以在渲染时完成，考虑使用 useMemo 或直接在组件内处理。
const result = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);
3. 清理逻辑过度设计
有些副作用其实不需要复杂的清理逻辑，但开发者可能会不加区分地写清理代码。
useEffect(() => {
const connection = createConnection();
return () => {
connection.close(); // 有些情况可以省略
};
}, []);
优化建议：
• 如果清理逻辑并不是必要的，就不要多此一举。
最佳实践
1. 什么时候用 useState？什么时候直接用变量？
• 如果一个值是可以从 props 或其他状态计算得到的，就直接计算，不需要用 useState 存储。
• 如果一个值需要在多个地方被共享、更新，并且会触发重新渲染，就用 useState。
2. 尽量减少不必要的状态
如果你的状态只是派生值，应该避免用 useState。比如：
• 错误：
useEffect(() => {
setDerivedState(a + b);
}, [a, b]);
• 优化：
const derivedState = a + b;
3. 只处理真正的副作用
useEffect 是用来和外部系统交互的，比如 API 调用、事件监听、定时器等。不要用它来做简单的逻辑处理。
4. 保持依赖数组准确
确保依赖数组中只包含真正需要触发副作用的变量，避免遗漏或冗余。
5. 用自定义 Hook 复用逻辑
如果一个副作用逻辑需要在多个地方使用，提取成自定义 Hook 比直接在组件中写更清晰。
总结
useEffect 是 React 中一个非常重要的工具，但也是一个容易误用的工具。要正确使用它，需要清楚副作用的定义和目的：它不是状态监听器，而是一个处理渲染后和清理逻辑的工具。在日常开发中，始终记住以下几点：
• 减少不必要的状态。
• 不要用它做状态派生。
• 只在真正需要副作用的场景使用。
• 使用依赖数组精准控制执行次数。
希望这篇文章能帮助你更好地理解和使用 useEffect，让代码更简洁、更高效！
