# useEffect 基础用法

URL: https://caijiao.org/react/chapter5/use-effect
Source: docs/react/chapter5/use-effect.md
Description: 'seEffect 是 React 中用于处理副作用的 Hook，常用于执行数据请求、订阅、DOM 操作等逻辑。它在函数组件中替代了类组件的生命周期方法，如 componentDidMount 和 componentDidUpdate。'

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