在 React 中，useEffect 钩子的作用是什么？它的参数有哪些？如何使用 useEffect 实现组件的副作用处理？

参考答案：

在 React 中，useEffect 是 函数组件处理副作用的核心 Hook，它可以替代类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 生命周期方法。

---

1. 作用

useEffect 的主要作用是：

1. 执行副作用操作：包括数据请求、订阅事件、DOM 操作、定时器、日志记录等。
2. 在组件挂载、更新或卸载时执行：根据依赖数组的不同，可以控制副作用执行的时机。

注意：副作用指的不是纯计算，而是对组件外部世界产生影响的操作。

---

2. 参数

useEffect 接收两个参数：

useEffect(effect: () => (void | (() => void)), deps?: any[])

1. effect

   • 一个函数，包含副作用逻辑。
   • 可以返回一个清理函数，用于在组件卸载或副作用重新执行前进行清理。

2. deps（依赖数组，可选）

   • 指定副作用依赖的变量数组。
   • React 会在依赖变化时重新执行 effect。
   • 如果不传依赖数组 → 每次渲染都执行
   • 空数组 [] → 仅在组件挂载和卸载时执行
   • 含有依赖 [a, b] → 只有当 a 或 b 改变时执行

---

3. 使用示例

（1）组件挂载时执行一次副作用

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    console.log('组件挂载');

    return () => {
      console.log('组件卸载');
    };
  }, []); // 空依赖数组
}

（2）依赖某些状态更新时执行

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('count 更新为:', count);
  }, [count]); // 依赖 count
}

（3）副作用中设置定时器，并在卸载时清理

useEffect(() => {
  const timer = setInterval(() => {
    console.log('定时器触发');
  }, 1000);

  return () => clearInterval(timer); // 清理
}, []); // 挂载时设置，卸载时清理

---

4. 注意事项

1. 避免依赖遗漏

   • 所有在副作用中使用的外部变量（状态、props、函数）都应该在依赖数组中列出，否则可能出现闭包陷阱。

2. 清理副作用

   • 在副作用中注册事件或定时器时，要返回清理函数，避免内存泄漏。

3. 多个 useEffect 可以共存

   • 每个副作用可以单独声明，提高逻辑可读性。

题目要点：

• useEffect 用于在函数组件中处理副作用，包括数据请求、事件监听、DOM 操作等。
• 接受两个参数：副作用函数 effect 和依赖数组 deps。
• 副作用函数可以返回清理函数，避免资源泄漏。
• 依赖数组控制副作用执行时机：空数组 → 挂载/卸载一次，指定依赖 → 依赖变化时执行，不传 → 每次渲染执行。