react中hooks之useEffect 用法总结

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

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

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

2. useEffect 的实行时机

2.1 省略依赖项

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

复制代码

• 组件每次渲染都会实行
  
• 包罗首次渲染和后续更新
  

2.2 指定依赖项

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

复制代码

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

2.3 空数组依赖项

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

复制代码

• 仅在组件首次渲染（挂载）时实行一次
  
• 雷同于 class 组件的 componentDidMount
  

3. 常见问题和最佳实践

3.1 避免依赖项循环

1. // ❌ 错误示例：造成无限循环
2. function BadExample() {
3.   const [count, setCount] = useState(0);
4.   
5.   useEffect(() => {
6.     setCount(count + 1); // 直接修改依赖项
7.   }, [count]);
8.   
9.   return <div>{count}</div>;
10. }
12. // ✅ 正确示例：使用函数式更新
13. function GoodExample() {
14.   const [count, setCount] = useState(0);
15.   
16.   useEffect(() => {
17.     setCount(prevCount => prevCount + 1);
18.   }, []); // 不需要依赖项
19.   
20.   return <div>{count}</div>;
21. }

复制代码

3.2 分离关注点

1. function UserProfile({ userId }) {
2.   const [user, setUser] = useState(null);
3.   const [posts, setPosts] = useState([]);
5.   // ✅ 分开声明不同功能的 useEffect
6.   useEffect(() => {
7.     // 获取用户信息
8.     fetchUser(userId).then(setUser);
9.   }, [userId]);
11.   useEffect(() => {
12.     // 获取用户帖子
13.     fetchUserPosts(userId).then(setPosts);
14.   }, [userId]);
16.   return (
17.     <div>
18.       <UserInfo user={user} />
19.       <UserPosts posts={posts} />
20.     </div>
21.   );
22. }

复制代码

4. 清除副作用

4.1 清理函数的实行时机

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

• 组件卸载时
  
• 下一次 effect 实行前
  

4.2 变乱监听示例

1. function WindowWidth() {
2.   const [width, setWidth] = useState(window.innerWidth);
3.   
4.   useEffect(() => {
5.     const handleResize = () => setWidth(window.innerWidth);
6.    
7.     // 添加事件监听
8.     window.addEventListener('resize', handleResize);
9.    
10.     // 清理函数
11.     return () => {
12.       window.removeEventListener('resize', handleResize);
13.     };
14.   }, []); // 空依赖数组，只在挂载和卸载时执行
16.   return <div>Window width: {width}</div>;
17. }

复制代码

4.3 定时器示例

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

复制代码

4.4 数据订阅示例

1. function DataSubscriber({ dataSource }) {
2.   const [data, setData] = useState(null);
4.   useEffect(() => {
5.     let isSubscribed = true;
7.     const handleData = (newData) => {
8.       if (isSubscribed) {
9.         setData(newData);
10.       }
11.     };
13.     // 订阅数据源
14.     const subscription = dataSource.subscribe(handleData);
16.     // 清理函数：取消订阅
17.     return () => {
18.       isSubscribed = false;
19.       subscription.unsubscribe();
20.     };
21.   }, [dataSource]); // 依赖于 dataSource
23.   return <div>{data ? <DataView data={data} /> : 'Loading...'}</div>;
24. }

复制代码

4.5 WebSocket 连接示例

1. function WebSocketComponent({ url }) {
2.   const [messages, setMessages] = useState([]);
4.   useEffect(() => {
5.     const ws = new WebSocket(url);
7.     ws.onmessage = (event) => {
8.       setMessages(prev => [...prev, event.data]);
9.     };
11.     // 清理函数：关闭 WebSocket 连接
12.     return () => {
13.       ws.close();
14.     };
15.   }, [url]);
17.   return (
18.     <div>
19.       {messages.map((msg, index) => (
20.         <div key={index}>{msg}</div>
21.       ))}
22.     </div>
23.   );
24. }

复制代码

5. 现实应用场景

5.1 表单主动生存

1. function AutoSaveForm() {
2.   const [content, setContent] = useState('');
3.   const [saving, setSaving] = useState(false);
5.   useEffect(() => {
6.     // 防抖处理
7.     const timeoutId = setTimeout(() => {
8.       if (content) {
9.         setSaving(true);
10.         saveContent(content)
11.           .then(() => setSaving(false));
12.       }
13.     }, 1000);
15.     return () => clearTimeout(timeoutId);
16.   }, [content]);
18.   return (
19.     <div>
20.       <textarea
21.         value={content}
22.         onChange={e => setContent(e.target.value)}
23.       />
24.       {saving && <span>Saving...</span>}
25.     </div>
26.   );
27. }

复制代码

5.2 及时搜索

1. function SearchComponent() {
2.   const [query, setQuery] = useState('');
3.   const [results, setResults] = useState([]);
5.   useEffect(() => {
6.     // 避免空查询
7.     if (!query.trim()) {
8.       setResults([]);
9.       return;
10.     }
12.     const abortController = new AbortController();
14.     async function fetchResults() {
15.       try {
16.         const response = await fetch(
17.           `/api/search?q=${query}`,
18.           { signal: abortController.signal }
19.         );
20.         const data = await response.json();
21.         setResults(data);
22.       } catch (error) {
23.         if (error.name === 'AbortError') {
24.           // 忽略中止的请求错误
25.           return;
26.         }
27.         console.error('搜索出错:', error);
28.       }
29.     }
31.     const timeoutId = setTimeout(fetchResults, 300);
33.     // 清理函数：取消请求和清除定时器
34.     return () => {
35.       clearTimeout(timeoutId);
36.       abortController.abort();
37.     };
38.   }, [query]);
40.   return (
41.     <div>
42.       <input
43.         value={query}
44.         onChange={e => setQuery(e.target.value)}
45.         placeholder="搜索..."
46.       />
47.       <ul>
48.         {results.map(result => (
49.           <li key={result.id}>{result.title}</li>
50.         ))}
51.       </ul>
52.     </div>
53.   );
54. }

复制代码

6. 最佳实践总结

• 保持 effect 函数简便，专注于单一功能
  
• 公道利用依赖项，避免不须要的实行
  
• 始终清理副作用，防止内存泄漏
  
• 利用条件语句控制 effect 的实行
  
• 考虑利用自定义 Hook 封装常用的副作用逻辑
  
• 在开辟环境下利用 ESLint 的 exhaustive-deps 规则检查依赖项
  
• 利用 useCallback 和 useMemo 优化依赖项
  

通过公道利用 useEffect，我们可以优雅地处理组件的副作用，实现更复杂的交互逻辑，同时保持代码的可维护性和性能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。