react中hooks之useEffect 用法总结

1. 什么是函数的副作用（Side Effects）

副作用是指在组件渲染过程中，除了返回 JSX 之外的其他操作，例如：

数据获取（API 调用）
订阅数据源
手动修改 DOM
设置定时器
存储数据
日志记录
纯函数是特定的输入只会有特定的输出，也就是说组件会输出特定的DOM给浏览器渲染，除去这份逻辑以外的操作就称之为副作用，比如获取数据，监听，订阅等等

2. useEffect 的执行时机

2.1 省略依赖项

useEffect(() => {console.log('每次渲染都会执行');
}); // 没有依赖项数组

组件每次渲染都会执行
包括首次渲染和后续更新

2.2 指定依赖项

useEffect(() => {console.log(`count 发生变化：${count}`);
}, [count]); // 依赖于 count

首次渲染时执行
依赖项发生变化时执行
多个依赖项时，任意一个变化都会触发执行

2.3 空数组依赖项

useEffect(() => {console.log('只在组件挂载时执行一次');
}, []); // 空数组

仅在组件首次渲染（挂载）时执行一次
类似于 class 组件的 componentDidMount

3. 常见问题和最佳实践

3.1 避免依赖项循环

// ❌ 错误示例：造成无限循环
function BadExample() {const [count, setCount] = useState(0);useEffect(() => {setCount(count + 1); // 直接修改依赖项}, [count]);return <div>{count}</div>;
}// ✅ 正确示例：使用函数式更新
function GoodExample() {const [count, setCount] = useState(0);useEffect(() => {setCount(prevCount => prevCount + 1);}, []); // 不需要依赖项return <div>{count}</div>;
}

3.2 分离关注点

function UserProfile({ userId }) {const [user, setUser] = useState(null);const [posts, setPosts] = useState([]);// ✅ 分开声明不同功能的 useEffectuseEffect(() => {// 获取用户信息fetchUser(userId).then(setUser);}, [userId]);useEffect(() => {// 获取用户帖子fetchUserPosts(userId).then(setPosts);}, [userId]);return (<div><UserInfo user={user} /><UserPosts posts={posts} /></div>);
}

4. 清除副作用

4.1 清理函数的执行时机

清理函数会在以下情况执行：

组件卸载时
下一次 effect 执行前

4.2 事件监听示例

function WindowWidth() {const [width, setWidth] = useState(window.innerWidth);useEffect(() => {const handleResize = () => setWidth(window.innerWidth);// 添加事件监听window.addEventListener('resize', handleResize);// 清理函数return () => {window.removeEventListener('resize', handleResize);};}, []); // 空依赖数组，只在挂载和卸载时执行return <div>Window width: {width}</div>;
}

4.3 定时器示例

function Timer() {const [count, setCount] = useState(0);useEffect(() => {const timer = setInterval(() => {setCount(c => c + 1);}, 1000);// 清理函数：组件卸载时清除定时器return () => clearInterval(timer);}, []); // 空依赖数组return <div>Count: {count}</div>;
}

4.4 数据订阅示例

function DataSubscriber({ dataSource }) {const [data, setData] = useState(null);useEffect(() => {let isSubscribed = true;const handleData = (newData) => {if (isSubscribed) {setData(newData);}};// 订阅数据源const subscription = dataSource.subscribe(handleData);// 清理函数：取消订阅return () => {isSubscribed = false;subscription.unsubscribe();};}, [dataSource]); // 依赖于 dataSourcereturn <div>{data ? <DataView data={data} /> : 'Loading...'}</div>;
}

4.5 WebSocket 连接示例

function WebSocketComponent({ url }) {const [messages, setMessages] = useState([]);useEffect(() => {const ws = new WebSocket(url);ws.onmessage = (event) => {setMessages(prev => [...prev, event.data]);};// 清理函数：关闭 WebSocket 连接return () => {ws.close();};}, [url]);return (<div>{messages.map((msg, index) => (<div key={index}>{msg}</div>))}</div>);
}

5. 实际应用场景

5.1 表单自动保存

function AutoSaveForm() {const [content, setContent] = useState('');const [saving, setSaving] = useState(false);useEffect(() => {// 防抖处理const timeoutId = setTimeout(() => {if (content) {setSaving(true);saveContent(content).then(() => setSaving(false));}}, 1000);return () => clearTimeout(timeoutId);}, [content]);return (<div><textareavalue={content}onChange={e => setContent(e.target.value)}/>{saving && <span>Saving...</span>}</div>);
}

5.2 实时搜索

function SearchComponent() {const [query, setQuery] = useState('');const [results, setResults] = useState([]);useEffect(() => {// 避免空查询if (!query.trim()) {setResults([]);return;}const abortController = new AbortController();async function fetchResults() {try {const response = await fetch(`/api/search?q=${query}`,{ signal: abortController.signal });const data = await response.json();setResults(data);} catch (error) {if (error.name === 'AbortError') {// 忽略中止的请求错误return;}console.error('搜索出错:', error);}}const timeoutId = setTimeout(fetchResults, 300);// 清理函数：取消请求和清除定时器return () => {clearTimeout(timeoutId);abortController.abort();};}, [query]);return (<div><inputvalue={query}onChange={e => setQuery(e.target.value)}placeholder="搜索..."/><ul>{results.map(result => (<li key={result.id}>{result.title}</li>))}</ul></div>);
}