1
import { useEffect } from 'react';
2

3
function MyComponent() {
4
  // 基础用法
5
  useEffect(() => {
6
    // 副作用执行的代码（核心逻辑）
7

8
    // 可选：清理函数（用于卸载/重新执行前清理）
9
    return () => {
10
      // 清理副作用的代码
11
    };
12
  }, [/* 依赖项数组 */]);
13

14
  return <div>组件内容</div>;
15
}

1
import { useState, useEffect } from 'react';
2

3
function TimerComponent() {
4
  const [seconds, setSeconds] = useState(0);
5

6
  useEffect(() => {
7
    // 启动定时器：每秒更新秒数
8
    const timer = setInterval(() => {
9
      setSeconds(prev => prev + 1);
10
    }, 1000);
11

12
    // 清理函数：组件卸载时清除定时器
13
    return () => {
14
      clearInterval(timer);
15
      console.log('定时器已清除');
16
    };
17
  }, []); // 仅首次渲染启动定时器
18

19
  return (
20
    <div>
21
      <h1>已计时：{seconds} 秒</h1>
22
    </div>
23
  );
24
}

1
import { useState, useEffect } from 'react';
2

3
function UserProfile({ userId }) {
4
  const [user, setUser] = useState(null);
5
  const [loading, setLoading] = useState(false);
6

7
  useEffect(() => {
8
    // 当 userId 变化时，重新请求用户信息
9
    const fetchUser = async () => {
10
      setLoading(true);
11
      try {
12
        const res = await fetch(`/api/users/${userId}`);
13
        const data = await res.json();
14
        setUser(data);
15
      } catch (err) {
16
        console.error('请求用户信息失败：', err);
17
      } finally {
18
        setLoading(false);
19
      }
20
    };
21

22
    // 若 userId 存在则执行请求
23
    if (userId) {
24
      fetchUser();
25
    }
26

27
    // 清理函数：取消未完成的请求（防止竞态问题）
28
    return () => {
29
      const controller = new AbortController();
30
      controller.abort(); // 中止请求
31
    };
32
  }, [userId]); // 依赖 userId，变化时重新执行
33

34
  if (loading) return <div>加载中...</div>;
35
  if (!user) return <div>暂无用户信息</div>;
36

37
  return (
38
    <div>
39
      <h2>{user.name}</h2>
40
      <p>邮箱：{user.email}</p>
41
      <p>年龄：{user.age}</p>
42
    </div>
43
  );
44
}