React中useEffect钩子是什么？新手学习该钩子遇困惑

开发者阿泽

2026-7-12

搞懂React的useEffect钩子

useEffect就是React专门用来处理组件渲染过程中副作用的钩子——先明确：像数据请求、DOM操作、订阅/取消订阅、定时器这些不属于「纯渲染逻辑」（纯渲染就是根据state/props生成UI的过程）的操作，都属于副作用。

核心作用

它帮你把这些副作用操作和组件的「挂载、更新、卸载」阶段绑定起来，让你能精准控制代码什么时候执行。

基础用法示例

比如组件挂载后请求数据：

import { useEffect, useState } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 这里写副作用逻辑：发起请求获取用户列表
    async function fetchUsers() {
      const res = await fetch('/api/users');
      const data = await res.json();
      setUsers(data);
    }
    fetchUsers();
  }, []); // 空数组依赖：仅在组件第一次渲染完成（挂载）时执行一次

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

依赖数组的关键作用

依赖数组决定了useEffect什么时候重新执行：

传空数组[]：只在组件挂载时执行一次，之后不管组件怎么更新都不触发
传特定值（比如[users]）：只有当这个值发生变化时，才会重新执行副作用
不传依赖数组：每次组件渲染完成后都会执行，慎用，容易导致无限循环

清理副作用的必要性

有些副作用如果不清理会造成内存泄漏（比如定时器、事件监听、订阅），useEffect支持返回一个清理函数，这个函数会在组件卸载或者依赖变化时执行：

useEffect(() => {
  const timer = setInterval(() => {
    console.log('每秒输出一次');
  }, 1000);

  // 组件卸载/依赖更新时，清除定时器
  return () => clearInterval(timer);
}, []);