react 的useEffect有什么作用

### React `useEffect` Hook 功能和用途

#### 一、Hook 的命名约定
React Hooks 都以 `use` 开头，像 `useState`、`useContext` 等，因此 `useEffect` 同样遵循这一规范[^1]。

#### 二、灵活性与功能
`useEffect` 是一个非常灵活的 Hook，允许函数组件执行各种副作用操作。通过合理配置依赖数组，可以精确控制副作用函数的触发时机，进而模拟类组件中的生命周期方法行为。掌握其使用对于构建高效的 React 应用至关重要[^2]。

#### 三、处理副作用
此 Hook 主要用来处理所谓的“副作用”，即那些不直接参与应用状态更新却必要的操作，比如数据获取、订阅事件或是手动修改 DOM 等。这些通常不在纯函数逻辑内完成的任务，在 React 函数式组件里可以通过 `useEffect` 来管理[^4]。

#### 四、双次渲染现象解释
当开发者注意到 `useEffect` 可能在每次重新渲染之后都被调用了，尤其是在启用了 Strict Mode 下工作时——这是由于 React 故意在开发环境中重复调用某些生命周期回调以及函数组件本身，以此检测潜在未定义的行为或错误[^5]。

import React, { useEffect } from 'react';

function ExampleComponent() {
    useEffect(() => {
        console.log('This effect runs after every render');
        
        return () => {
            console.log('Cleanup this effect before running it again or unmounting component');
        };
    }, []); // Empty dependency array means the effect only runs on mount and cleanup on unmount
    
    return (
        <div>
            {/* Component JSX */}
        </div>
    );
}