React 中的 useEffect Hook 用于处理副作用（side effects），例如：
- 网络请求：在组件挂载或更新时，需要从服务器获取数据。
- 设置 timer：在组件挂载时，需要设置一个 timer 来执行某些任务。
- 操作 DOM：在组件挂载或更新时，需要直接操作 DOM 元素。
- 订阅事件：在组件挂载时，需要订阅某些事件，例如 WebSocket 事件或浏览器事件。
- 清理资源：在组件卸载时，需要清理某些资源，例如关闭 WebSocket 连接或删除 timer。
使用 useEffect 的时机：
- 组件挂载：在组件首次挂载时，需要执行某些初始化操作。
- 组件更新：在组件的 props 或 state 发生变化时，需要重新执行某些操作。
- 组件卸载：在组件卸载时，需要清理某些资源。
useEffect 的基本语法：
import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 在组件挂载时，执行某些操作
console.log('Mounted!');
// 在组件卸载时，清理某些资源
return () => {
console.log('Unmounted!');
};
}, []); // 第二个参数是一个依赖项数组，空数组表示只在组件挂载时执行
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
在上面的示例中，我们使用 useEffect 来记录组件的挂载和卸载事件，并在组件卸载时清理某些资源。