登录
用了这么久React，你真的搞懂useEffect了吗？
你是不是也遇到过这样的场景？页面刚加载时数据一片空白，需要手动刷新才能显示；组件里设置了定时器，结果切换页面后还在后台疯狂运行；甚至有时候，明明代码写得没问题，却出现了奇怪的内存泄漏问题……
别担心，这些问题我都遇到过！今天我就用一个超详细的指南，带你彻底搞懂React中的useEffect，让你从此告别这些烦人的坑。
读完本文，你将掌握useEffect的所有核心用法，包括数据获取、订阅机制、DOM操作，还能学会如何避免常见的内存泄漏问题。我会用大量代码示例和详细注释，让你一看就懂，一学就会！
什么是useEffect？为什么我们需要它？
简单来说，useEffect就是React函数组件中处理"副作用"的利器。什么是副作用？就是那些会影响组件外部世界的操作，比如数据获取、设置订阅、手动修改DOM等。
在类组件时代，我们通常在componentDidMount、componentDidUpdate和componentWillUnmount这些生命周期方法中处理这些操作。但现在有了函数组件和Hooks，useEffect就能帮我们统一处理所有这些场景。
让我们先看一个最简单的例子：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// 类似于componentDidMount和componentDidUpdate
useEffect(() => {
// 更新文档标题
document.title = `你点击了 ${count} 次`;
});
return (
<div>
<p>你点击了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
点我
</button>
</div>
);
}
这段代码中，useEffect会在每次组件渲染后执行，更新文档的标题。这就是useEffect最基本的用法。
三种不同的依赖数组配置
useEffect最强大的地方在于它的第二个参数——依赖数组。通过不同的配置，我们可以控制effect的执行时机。
1. 每次渲染都执行
如果不传第二个参数，useEffect会在每次组件渲染后都执行：
useEffect(() => {
console.log('这个effect在每次渲染后都会执行');
});
这种用法要谨慎，因为频繁执行可能会影响性能。
2. 只在首次渲染时执行
如果传递一个空数组[]，effect只会在组件挂载时执行一次：
useEffect(() => {
console.log('这个effect只在组件挂载时执行一次');
}, []); // 空依赖数组
这种模式非常适合数据获取操作，我们通常在这里发起API请求。
3. 在特定值变化时执行
如果数组中包含了某些值，effect会在这些值发生变化时执行：
useEffect(() => {
console.log('这个effect在count变化时执行');
}, [count]); // count变化时重新执行
这种用法可以让我们在特定状态变化时执行相应的操作。
实际应用场景代码示例
场景一：数据获取
数据获取是useEffect最常见的用法之一。让我们看看如何正确地在组件中获取数据：
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
// 定义一个异步函数来获取数据
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(`https://api.example.com/users/${userId}`);
if (!response.ok) {
throw new Error('网络请求失败');
}
const userData = await response.json();
setUser(userData);
setError(null);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [userId]); // 当userId变化时重新获取数据
if (loading) return <div>加载中...</div>;
if (error) return <div>错误: {error}</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
注意这里我们将userId作为依赖项，这样当userId变化时，组件会自动重新获取对应用户的数据。
场景二：订阅和取消订阅
在处理实时数据或事件监听时，我们需要正确设置订阅和取消订阅：
import React, { useState, useEffect } from 'react';
function OnlineStatus() {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
// 模拟一个订阅函数
function handleStatusChange(status) {
setIsOnline(status);
}
// 创建订阅
console.log('创建订阅');
// 这里通常是建立WebSocket连接或事件监听
const subscription = {
unsubscribe: () => console.log('取消订阅')
};
// 设置初始状态
handleStatusChange(true);
// 返回清理函数，在组件卸载时执行
return () => {
console.log('执行清理');
subscription.unsubscribe();
};
}, []); // 空数组表示只在挂载和卸载时执行
if (isOnline === null) {
return <div>加载中...</div>;
}
return <div>用户{isOnline ? '在线' : '离线'}</div>;
}
关键点是我们在effect中返回了一个清理函数，这个函数会在组件卸载时自动调用，确保我们不会留下任何内存泄漏。
场景三：手动操作DOM
虽然React推荐使用声明式的方式操作UI，但有时候我们确实需要直接操作DOM：
import React, { useRef, useEffect } from 'react';
function AutoFocusInput() {
const inputRef = useRef(null);
useEffect(() => {
// 组件挂载后自动聚焦到输入框
if (inputRef.current) {
inputRef.current.focus();
console.log('输入框已获得焦点');
}
}, []); // 空依赖数组，只在挂载时执行
return <input ref={inputRef} type="text" placeholder="自动获得焦点的输入框" />;
}
这个例子展示了如何使用useRef和useEffect配合来实现自动聚焦功能。
常见坑点及如何避免
坑点一：忘记清理工作
这是最常见的useEffect错误之一。如果我们设置了订阅、定时器或事件监听，但忘记清理，就会导致内存泄漏：
// ❌ 错误示例：设置了定时器但没有清理
useEffect(() => {
const interval = setInterval(() => {
console.log('定时器运行中...');
}, 1000);
// 忘记返回清理函数！
}, []);
// ✅ 正确示例：返回清理函数
useEffect(() => {
const interval = setInterval(() => {
console.log('定时器运行中...');
}, 1000);
// 返回清理函数
return () => {
clearInterval(interval);
console.log('定时器已清理');
};
}, []);
坑点二：错误的依赖数组
依赖数组配置错误会导致各种奇怪的问题：
function Counter() {
const [count, setCount] = useState(0);
// ❌ 错误：缺少count依赖
useEffect(() => {
console.log(`Count: ${count}`);
}, []); // 缺少count依赖，effect不会在count变化时重新执行
// ✅ 正确：包含所有依赖
useEffect(() => {
console.log(`Count: ${count}`);
}, [count]); // 正确包含count依赖
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
</div>
);
}
如果你使用的是ESLint，强烈建议启用react-hooks/exhaustive-deps规则，它会自动检测缺失的依赖项。
坑点三：无限循环
不正确的依赖项配置可能导致无限重新渲染：
// ❌ 错误示例：导致无限循环
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1); // 每次effect执行都更新状态，导致重新渲染
}); // 没有依赖数组，每次渲染后都执行
// ✅ 正确示例：使用函数式更新避免无限循环
useEffect(() => {
setCount(prevCount => prevCount + 1);
}, []); // 只在挂载时执行一次
高级技巧和最佳实践
1. 使用多个useEffect分离关注点
与类组件中所有生命周期逻辑混在一起不同，我们可以使用多个useEffect来分离不同的逻辑：
function FriendStatus({ friendId }) {
const [status, setStatus] = useState(null);
const [profile, setProfile] = useState(null);
// 处理状态订阅
useEffect(() => {
const subscription = subscribeToStatus(friendId, setStatus);
return () => subscription.unsubscribe();
}, [friendId]);
// 处理资料获取
useEffect(() => {
let ignore = false;
async function fetchProfile() {
const profileData = await getProfile(friendId);
if (!ignore) {
setProfile(profileData);
}
}
fetchProfile();
return () => {
ignore = true;
};
}, [friendId]);
// 更多独立的effect...
}
这样让代码更加清晰，每个effect只负责一个特定的功能。
2. 使用自定义Hook抽象effect逻辑
如果某个effect逻辑在多个组件中都需要，我们可以将其提取为自定义Hook：
// 自定义Hook：useApi
function useApi(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]); // 当url变化时重新获取
return { data, loading, error };
}
// 在组件中使用自定义Hook
function UserProfile({ userId }) {
const { data: user, loading, error } = useApi(`/api/users/${userId}`);
if (loading) return <div>加载中...</div>;
if (error) return <div>错误: {error}</div>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
3. 使用useCallback和useMemo优化性能
当effect依赖于函数或对象时，为了避免不必要的重新执行，我们可以使用useCallback和useMemo：
function ProductList({ category, sortBy }) {
const [products, setProducts] = useState([]);
// 使用useCallback记忆化函数，避免每次渲染都创建新函数
const fetchProducts = useCallback(async () => {
const response = await fetch(`/api/products?category=${category}&sort=${sortBy}`);
const data = await response.json();
setProducts(data);
}, [category, sortBy]); // 依赖项变化时重新创建函数
useEffect(() => {
fetchProducts();
}, [fetchProducts]); // 现在effect依赖于记忆化的函数
return (
<ul>
{products.map(product => (
<li key={product.id}>{product.name}</li>
))}
</ul>
);
}
