React useEffect 详解：理解其概念、使用和依赖项

前端

2023-10-17 22:09:38

React useEffect 钩子是一个强大的工具，用于在 React 组件中创建基于渲染的操作，而无需事件触发。在本指南中，我们将深入探究 useEffect 的概念、基本用法、不同依赖项的说明以及清除副作用。

一、useEffect 概念

useEffect 是一个 React 钩子函数，可用于在组件的整个生命周期中执行特定操作。与通过处理程序执行的操作不同，useEffect 中的操作是在渲染过程本身触发的。这使得 useEffect 对于执行以下任务非常有用：

发送 AJAX 请求
设置订阅
修改 DOM
触发其他副作用

二、useEffect 基本用法

useEffect 钩子接收两个参数：一个回调函数和一个依赖项数组。回调函数指定要执行的操作，而依赖项数组指定组件状态或 prop 中哪些值会触发回调函数的执行。

基本语法如下：

useEffect(() => {
  // 要执行的操作
}, [依赖项数组]);

三、useEffect 依赖项说明

依赖项数组决定了 useEffect 回调函数触发的频率。如果依赖项数组为空，则回调函数只在组件挂载时执行一次。如果依赖项数组包含任何值，则每当这些值发生更改时，都会触发回调函数。

以下是一些常见的依赖项说明：

[]： 仅在组件挂载时执行一次。
[prop1, prop2]： 每次 prop1 或 prop2 发生更改时执行。
[state1, state2]： 每次 state1 或 state2 发生更改时执行。
[prop1, state2]： 每次 prop1 或 state2 发生更改时执行。

四、useEffect 清除副作用

useEffect 回调函数可以通过返回一个清理函数来清除副作用。清理函数在组件卸载时执行，用于清除由回调函数创建的任何订阅、计时器或其他资源。

useEffect(() => {
  // 要执行的操作
  
  // 返回一个清理函数
  return () => {
    // 清除副作用
  };
}, [依赖项数组]);

五、React useEffect 使用实例

让我们通过一些实例来说明 React useEffect 的用法：

示例 1：发送 AJAX 请求

import { useEffect, useState } from "react";

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://example.com/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return <div>{data ? data.message : "Loading..."}</div>;
};

示例 2：设置计时器

import { useEffect, useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    // 清除计时器
    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
};