# 副作用与清除机制

URL: https://caijiao.org/react/chapter5/side-effects
Source: docs/react/chapter5/side-effects.md
Description: 在 React 中，副作用包括定时器、事件监听、数据请求等操作。使用 useEffect 返回清理函数可以在组件卸载或依赖变化时清除副作用，避免内存泄漏和逻辑错误。

## 什么是副作用？

在 React 中，副作用（Side Effects）指的是那些不会在组件渲染过程中同步完成，且会影响外部系统或产生持久影响的操作。常见副作用包括：

- 订阅事件或数据流
- 发送网络请求
- 操作 DOM
- 设置定时器或轮询
- 手动修改浏览器标题、localStorage 等

## 使用 useEffect 处理副作用

`useEffect` 是 React 中用于处理副作用的 Hook。它在组件渲染完成后执行一次，也可以根据依赖项多次执行。

### 示例：设置定时器

```jsx
import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('定时器执行');
    }, 1000);

    // 返回清理函数
    return () => {
      clearInterval(timer);
      console.log('定时器清除');
    };
  }, []); // 空数组表示只在挂载和卸载时运行
  return <p>定时器已启动，查看控制台输出</p>;
}
````

## 清除副作用的作用

当组件卸载或 `useEffect` 的依赖发生变化时，React 会自动调用 `useEffect` 中返回的清理函数。这种机制可以帮助我们：

* 取消订阅，防止内存泄漏
* 清理定时器或轮询任务
* 撤销 DOM 操作或全局事件监听器

## 示例：事件监听与清除

```jsx
import { useEffect } from 'react';

function ResizeListener() {
  useEffect(() => {
    const handleResize = () => {
      console.log('窗口尺寸变化');
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <p>请尝试调整窗口大小</p>;
}
```

## 总结

`useEffect` 中的清除机制是管理副作用生命周期的关键，它确保组件在卸载或更新时不会留下无用的资源或事件，保持应用运行的性能和正确性。