React useEffect — 副作用处理

数据请求、定时器、DOM 操作，理解依赖数组 · 难度：进阶 · +20XP

useEffect — 处理"副作用"

useEffect 在组件渲染后执行副作用：发 API 请求、操作 DOM、设置定时器、订阅数据。

回顾：之前学的 JS 中你可能在全局写代码，React 中副作用放在 useEffect 里。

三种执行时机

// 1. 每次渲染后都执行（少用）
useEffect(() => { console.log("render了"); });
// 2. 只在首次渲染后执行一次（最常用）
useEffect(() => { fetchUsers(); }, []);
// 3. 依赖变化时执行
useEffect(() => { fetchUser(id); }, [id]);

清理副作用

useEffect(() => {
  const timer = setInterval(() => tick(), 1000);
  return () => clearInterval(timer);  // 清理函数
}, []);

数据请求模式

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch("/api/users")
      .then(r => r.json())
      .then(data => setUsers(data))
      .finally(() => setLoading(false));
  }, []);
  if (loading) return <div>加载中...</div>;
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}