useEffect 基础用法

useEffect 是 React 提供的 Hook，用于在函数组件中处理副作用操作。常见副作用包括数据获取、订阅事件、手动修改 DOM 等。使用 useEffect 可以让我们在组件渲染后执行某些操作。

1. 基本语法

jsx

import { useEffect } from 'react';

useEffect(() => {
  // 执行副作用逻辑
});

该函数在组件每次渲染后都会执行。

2. 只执行一次（模拟 componentDidMount）

在依赖项数组中传入空数组，表示仅在初次渲染时执行一次：

jsx

useEffect(() => {
  console.log('组件挂载');
}, []);

3. 依赖项变化时触发

传入依赖项数组，当其中的值发生变化时重新执行副作用函数：

jsx

useEffect(() => {
  console.log('count 改变了');
}, [count]);

如果 count 变化，useEffect 就会重新执行。

4. 清理副作用（模拟 componentWillUnmount）

useEffect 可以返回一个清理函数，在组件卸载或依赖变化前执行：

jsx

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时任务');
  }, 1000);

  return () => {
    clearInterval(timer); // 清理定时器
    console.log('组件卸载或副作用清理');
  };
}, []);

5. 多个 useEffect

可以在一个组件中使用多个 useEffect，分别处理不同的副作用逻辑：

jsx

useEffect(() => {
  console.log('监听 count');
}, [count]);

useEffect(() => {
  console.log('监听 name');
}, [name]);

总结

useEffect 是函数组件中处理副作用的标准方式，灵活替代了类组件的生命周期方法。通过依赖项数组，可以精确控制副作用函数的执行时机，并使用返回的清理函数管理资源释放。