React 中 useEffect 的作用和用法是什么？

推荐答案

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用操作通常包括数据获取、订阅、手动更改 DOM 等。useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。

基本用法

useEffect(() => {
  // 副作用操作
  return () => {
    // 清理操作
  };
}, [dependencies]);

• 第一个参数：一个函数，包含需要执行的副作用代码。这个函数可以返回一个清理函数，用于在组件卸载或重新渲染前执行清理操作。
• 第二个参数：一个依赖数组，用于指定 useEffect 的依赖项。只有当依赖项发生变化时，useEffect 才会重新执行。如果省略这个参数，useEffect 会在每次渲染后都执行。

示例

// www.javascriptcn.com code example
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // 仅在 count 发生变化时更新

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

本题详细解读

1. useEffect 的作用

useEffect 的主要作用是在函数组件中处理副作用操作。副作用操作是指那些与组件渲染无关的操作，例如：

• 数据获取
• 订阅事件
• 手动更改 DOM
• 设置定时器

2. useEffect 的执行时机

• 组件挂载时：useEffect 会在组件首次渲染后执行。
• 组件更新时：如果指定了依赖项，useEffect 会在依赖项发生变化时重新执行。
• 组件卸载时：如果 useEffect 返回了一个清理函数，这个函数会在组件卸载时执行。

3. 依赖项的作用

依赖项数组决定了 useEffect 何时重新执行。如果依赖项数组为空，useEffect 只会在组件挂载和卸载时执行一次。如果依赖项数组中有值，useEffect 会在这些值发生变化时重新执行。

4. 清理操作

useEffect 可以返回一个清理函数，用于在组件卸载或重新渲染前执行清理操作。例如，取消订阅、清除定时器等。

5. 注意事项

• 避免无限循环：如果 useEffect 的依赖项是状态或 props，并且在这些依赖项变化时又修改了它们，可能会导致无限循环。
• 性能优化：合理使用依赖项数组，避免不必要的副作用操作重复执行。

通过 useEffect，开发者可以在函数组件中更方便地管理副作用操作，使代码更加简洁和易于维护。