当前位置：首页 > news >正文

深入理解 React useEffect

news 2025/8/25 15:34:55

一、useEffect基础概念

1、什么是副作用（Side Effects）？
在React中，副作用是指那些与组件渲染结果无关的操作，例如：

数据获取（API调用）
手动修改DOM
设置订阅或定时器
记录日志

2、useEffect的基本语法

import { useEffect } from 'react';function MyComponent() {useEffect(() => {// 副作用逻辑在这里执行return () => {// 清理函数（可选）};}, [dependency1, dependency2]); // 依赖数组（可选）
}

二、useEffect的三种适用方式

1、每次渲染后都执行

useEffect(() => {// 每次组件渲染后都会执行console.log('组件已渲染或更新');
});

2、仅在挂载时执行一次

useEffect(() => {// 只在组件挂载时执行一次console.log('组件已挂载');return () => {// 清理函数，在组件卸载时执行console.log('组件即将卸载');};
}, []); // 空依赖数组

3、依赖特定值变化时执行

useEffect(() => {// 当 count 或 name 变化时执行console.log(`Count: ${count}, Name: ${name}`);return () => {// 清理上一次的 effectconsole.log('清理上一次的 effect');};
}, [count, name]); // 依赖数组

三、useEffect执行机制详解

请添加图片描述

四、常见使用场景

1、数据获取

import { useState, useEffect } from 'react';function UserProfile({ userId }) {const [user, setUser] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {// 重置状态setLoading(true);setError(null);const fetchUser = async () => {try {const response = await fetch(`/api/users/${userId}`);const userData = await response.json();setUser(userData);} catch (err) {setError(err.message);} finally {setLoading(false);}};fetchUser();// 不需要清理函数，因为 fetch 会自动取消}, [userId]); // 当 userId 变化时重新获取if (loading) return <div>加载中...</div>;if (error) return <div>错误: {error}</div>;return (<div><h1>{user.name}</h1><p>{user.email}</p></div>);
}

2、事件监听器

function WindowSizeTracker() {const [windowSize, setWindowSize] = useState({width: window.innerWidth,height: window.innerHeight});useEffect(() => {const handleResize = () => {setWindowSize({width: window.innerWidth,height: window.innerHeight});};// 添加事件监听window.addEventListener('resize', handleResize);// 清理函数：移除事件监听return () => {window.removeEventListener('resize', handleResize);};}, []); // 空数组表示只在挂载/卸载时执行return (<div>窗口尺寸: {windowSize.width} x {windowSize.height}</div>);
}

3、定时器

function Timer() {const [seconds, setSeconds] = useState(0);useEffect(() => {const intervalId = setInterval(() => {setSeconds(prevSeconds => prevSeconds + 1);}, 1000);// 清理函数：清除定时器return () => {clearInterval(intervalId);};}, []); // 空依赖数组，只在挂载时设置定时器return <div>已运行: {seconds} 秒</div>;
}

4、手动操作DOM

function FocusInput() {const inputRef = useRef(null);useEffect(() => {// 组件挂载后自动聚焦输入框if (inputRef.current) {inputRef.current.focus();}}, []); // 空数组表示只在挂载时执行return <input ref={inputRef} placeholder="自动聚焦" />;
}

五、依赖数组的详细说明

1、依赖数组的规则

// ✅ 正确：包含所有依赖
useEffect(() => {document.title = `${title} - ${count} 次点击`;
}, [title, count]); // 所有依赖都声明// ❌ 错误：缺少依赖
useEffect(() => {document.title = `${title} - ${count} 次点击`;
}, [title]); // 缺少 count 依赖// ✅ 正确：使用函数式更新避免依赖
useEffect(() => {const timer = setInterval(() => {setCount(prevCount => prevCount + 1); // 不需要 count 依赖}, 1000);return () => clearInterval(timer);
}, []); // 空依赖数组

2、处理对象和函数依赖

function UserProfile({ user }) {// 使用 useMemo 记忆化对象const userStatus = useMemo(() => ({isActive: user.active,statusText: user.active ? '活跃' : '非活跃'}), [user.active]); // 只有当 user.active 变化时重新计算// 使用 useCallback 记忆化函数const updateUser = useCallback((updates) => {// 更新用户逻辑}, [user.id]); // 依赖 user.iduseEffect(() => {// 使用记忆化的值和函数console.log(userStatus);updateUser({ lastLogin: new Date() });}, [userStatus, updateUser]); // 依赖记忆化的值return <div>用户状态: {userStatus.statusText}</div>;
}

六、useEffect的进阶用法

1、多个useEffect的使用

function ComplexComponent({ userId, autoRefresh }) {const [user, setUser] = useState(null);const [notifications, setNotifications] = useState([]);// 获取用户数据useEffect(() => {fetchUser(userId).then(setUser);}, [userId]);// 获取通知（依赖用户数据）useEffect(() => {if (user) {fetchNotifications(user.id).then(setNotifications);}}, [user]); // 依赖 user// 自动刷新通知useEffect(() => {if (!autoRefresh || !user) return;const intervalId = setInterval(() => {fetchNotifications(user.id).then(setNotifications);}, 30000);return () => clearInterval(intervalId);}, [autoRefresh, user]); // 依赖 autoRefresh 和 userreturn (<div>{/* 渲染逻辑 */}</div>);
}

2、适用自定义Hook封装useEffect

// 自定义 Hook：使用防抖的搜索
function useDebounce(value, delay) {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => {setDebouncedValue(value);}, delay);return () => {clearTimeout(handler);};}, [value, delay]); // 依赖 value 和 delayreturn debouncedValue;
}// 在组件中使用
function SearchComponent() {const [query, setQuery] = useState('');const [results, setResults] = useState([]);const debouncedQuery = useDebounce(query, 500);useEffect(() => {if (debouncedQuery) {searchAPI(debouncedQuery).then(setResults);} else {setResults([]);}}, [debouncedQuery]); // 依赖防抖后的查询return (<div><inputvalue={query}onChange={(e) => setQuery(e.target.value)}placeholder="搜索..."/><ul>{results.map(result => (<li key={result.id}>{result.name}</li>))}</ul></div>);
}

七、常见问题与解决方案

1、无限循环问题

// ❌ 错误：导致无限循环
const [count, setCount] = useState(0);useEffect(() => {setCount(count + 1); // 每次渲染都会更新 count，触发重新渲染
}, [count]); // 依赖 count// ✅ 正确：使用函数式更新或无依赖
useEffect(() => {setCount(prevCount => prevCount + 1); // 不依赖外部 count 值
}, []); // 空依赖数组

2、异步操作处理

function AsyncComponent() {const [data, setData] = useState(null);useEffect(() => {let isMounted = true; // 跟踪组件是否挂载const fetchData = async () => {try {const result = await fetch('/api/data');const jsonData = await result.json();if (isMounted) {setData(jsonData); // 只在组件仍挂载时更新状态}} catch (error) {if (isMounted) {console.error('获取数据失败:', error);}}};fetchData();return () => {isMounted = false; // 组件卸载时设置为 false};}, []);return <div>{data ? data.message : '加载中...'}</div>;
}

3、依赖函数的问题

function ProblematicComponent() {const [count, setCount] = useState(0);const logCount = () => {console.log('当前计数:', count);};// ❌ 问题：logCount 在每次渲染都是新函数useEffect(() => {logCount();}, [logCount]); // 导致每次渲染都执行// ✅ 解决方案1：将函数移到 useEffect 内部useEffect(() => {const logCount = () => {console.log('当前计数:', count);};logCount();}, [count]); // 只依赖 count// ✅ 解决方案2：使用 useCallback 记忆化函数const logCountMemoized = useCallback(() => {console.log('当前计数:', count);}, [count]); // 依赖 countuseEffect(() => {logCountMemoized();}, [logCountMemoized]); // 依赖记忆化的函数return <button onClick={() => setCount(c => c + 1)}>增加</button>;
}

八、性能优化技巧

1、条件执行Effect

function ExpensiveComponent({ data, shouldProcess }) {useEffect(() => {if (shouldProcess) {// 只有 shouldProcess 为 true 时才执行昂贵操作performExpensiveOperation(data);}}, [data, shouldProcess]); // 仍然声明所有依赖
});

2、使用useMemo优化依赖

function OptimizedComponent({ items, filter }) {// 使用 useMemo 避免不必要的重新计算const filteredItems = useMemo(() => {return items.filter(item => item.includes(filter));}, [items, filter]); // 只有当 items 或 filter 变化时重新计算// effect 只依赖记忆化的值useEffect(() => {console.log('过滤后的项目:', filteredItems);}, [filteredItems]); // 依赖记忆化的数组return (<ul>{filteredItems.map(item => (<li key={item}>{item}</li>))}</ul>);
}

3、避免不必要的Effect

// ❌ 不必要的 effect：可以在渲染期间直接计算
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [fullName, setFullName] = useState('');useEffect(() => {setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);// ✅ 更好的方案：在渲染期间直接计算
const fullName = `${firstName} ${lastName}`;

九、最佳实践总结

1、明确依赖： 始终声明所有effect中使用的依赖项
2、适当清理： 对于订阅、定时器等，一定要提供清理函数
3、分离关注点： 使用多个useEffect分离不同的逻辑
4、避免无限循环： 谨慎设置状态，避免创建渲染循环
5、性能优化： 使用useMemo和useCallback优化依赖项
6、条件执行： 在effect内部添加条件判断，避免不必要的执行
7、异步处理： 正确处理异步操作的清理和竞态条件