深入理解 React 的 useEffect：全面指南

在 React 中，useEffect 是一个非常重要的 Hook，用于在函数组件中处理副作用。它强大而灵活，是函数组件中替代类组件生命周期方法的核心工具。通过 useEffect，你可以轻松实现以下操作：

• 数据获取（例如调用 API）
• DOM 操作（如操作文档标题或动画效果）
• 事件监听（例如窗口大小调整）
• 清理任务（例如清理定时器或取消订阅）

本篇文章将从基础到进阶，全面解析 useEffect 的用法及最佳实践。

什么是 useEffect？

useEffect 是 React 提供的一个 Hook，用于处理函数组件中的副作用。副作用的概念简单来说就是那些与渲染无关的逻辑，比如访问浏览器 API、订阅数据流、定时器等。

来看一个简单的例子：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`当前计数值: ${count}`);
  });

  return (
    <div>
      <p>计数值：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

执行时机：

• 每次组件渲染后（包括初次渲染和状态更新后）都会执行 useEffect。
• 类似于类组件中的 componentDidMount 和 componentDidUpdate。

如何控制 useEffect 的执行时机？

useEffect 的第二个参数是一个依赖数组，用于控制它的执行时机。根据是否传递依赖数组以及传递哪些依赖，可以实现不同的行为。

1. 不传依赖数组

useEffect(() => {
  console.log('每次组件渲染后都会执行');
});

• 组件每次渲染后（包括状态或属性变化时）都会执行该 useEffect。

2. 传入空依赖数组

useEffect(() => {
  console.log('仅在组件挂载时执行一次');
}, []);

• 只在组件挂载时执行一次，类似于类组件中的 compo