掌握 React 的 useEffect Hook：综合指南

useEffect Hook 介绍

hookuseEffect是一个强大的工具，作为 Hooks API 的一部分在 React 16.8 中引入。它允许开发人员执行副作用，例如更新 DOM、获取数据和订阅功能组件中的事件。之前useEffect，类组件用于处理此类副作用，但有了 Hooks，开发人员无需编写类就可以实现相同的功能。hookuseEffect用途广泛，可用于广泛的任务，使其成为 React 开发中流行且重要的功能。

在本文中，您将了解useEffect钩子以及如何在 React 应用程序中使用它。您将使用函数组件，因为 React Hooks 不能在类内部工作。

先决条件

理解本文需要具备以下条件：

• 安装Node.js
• JavaScript 和 React 的基础知识

开始

用于 yarn create vite <project-name>创建新的 React 项目。使用 Vite 是因为它在 React 应用程序的开发和构建时间上速度很快。

通过运行以下命令启动应用程序：

cd project-name
yarn run dev

UseEffect Hook 语法和默认行为

useEffect是一个接受两个参数的函数，一个回调函数和一个依赖数组。要在您的项目中使用钩子创建副作用useEffect，请在功能组件中导入钩子以访问状态和道具，而无需编写额外的代码。
useEffect默认情况下在每次渲染后运行。它在第一次渲染后和每次更新后运行。以下是如何在功能组件中
声明钩子的示例：useEffect

// App.js

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

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

  useEffect(()=>{
    console.log(count);
  })

  return (
    <div style={{textAlign: "center", marginTop: "90px"}}> 
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment Counter       </button>
      <h1>This is {count} </h1>
    </div>
  )
}
export default App;

上面的代码片段执行以下操作：

• 从 React导入useEffect和导入useState
• 使用其相应的设置函数创建状态变量，并使用0as 值初始化状态
• 添加一个带有单击处理程序的按钮，通过传入一个函数来增加计数，以便在单击按钮时更新先前的状态
• 在组件内部调用useEffect函数并传入函数，该函数在每次渲染组件后执行

防止useEffect Hook中的无限循环

useEffect在每次渲染之后运行，并且在渲染时可能会导致无限循环，在某些情况下，这可能会导致性能问题。为防止这种情况，您需要有条件地useEffect从功能组件运行 Hook，并在调用该函数时提供称为“依赖数组”的第二个参数useEffect。
依赖项数组通常包含值，如果值从一个渲染更改为下一个渲染，它将导致运行useEffect。这有助于限制效果运行的次数并确定它何时运行而不是在每次渲染后运行。

// App.js
... 
  useEffect(()=>{
    console.log(count);
  }, [])
...

在上面的代码中，该useEffect函数包含一个数组作为其第二个参数，称为依赖数组。

一个空的依赖数组表示该函数会在组件加载时首先运行一次，并且没有依赖可以监视并触发效果再次运行。

useEffect您可以通过添加到依赖项数组来在每次count更改时运行该函数count，如下所示：

// App.js
... 
  useEffect(()=>{
    console.log(count);
  }, [count])
...

在上面的代码中，当组件第一次运行时，状态从初始值 开始0，在任何count调用 的地方，该值都被替换为0，包括依赖数组。点击Increment Counter按钮手动触发组件的重新渲染并将状态count从更新0为1``count``1

在下面的代码片段中，您将从meme API获取 meme 图像，并在单击按钮时显示新图像。您可以使用useEffect它从服务器获取数据并毫无问题地显示它。渲染组件后，它将获取并渲染数据。

// Meme.js

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

const Meme = () => {
  const [memeData, setMemeData] = useState({randomImage: "http://i.imgflip.com/1bij.jpg"});
  const [allMemeImages, setAllMemeImages] = useState([]);

  useEffect(() => {
    fetch("https://api.imgflip.com/get_memes")
      .then((res) => res.json())
      .then((data) => setAllMemeImages(data.data.memes));
  }, []);

  const handleClick = () => {
    const randomNum = Math.floor(Math.random() * allMemeImages.length);
    const url = allMemeImages[randomNum].url;
    setMemeData((prevState) => {
      return {
        ...prevState,
        randomImage: url,
      };
    });
  };

  return (
      <div style={{ textAlign: "center", marginTop: "90px" }}>
        <button onClick={handleClick}>Get a new meme image</button>
        <div style={{ textAlign: "center", marginTop: "90px" }}>
          <img
            src={memeData.randomImage}
            alt='meme-images'
            style={{ width: "300px", height: "300px" }}
          />
        </div>
      </div>
  );
};
export default Meme;

上面的代码执行以下操作：

• 从 React导入useEffect和导入useState
• 声明初始状态以在组件的第一个渲染器上使用 set 函数metadata显示图像setMemeData
• allMemeImages声明用于存储来自 meme API 端点的所有图像的初始状态
• useEffect钩子被调用，fetch 函数用于调用 meme API 并使用setAllMemeImages. 一个空的依赖数组表示使用useEffecthook调用了一次 meme API
• 声明handleClick单击按钮时获取新图像的函数。此函数从从 meme API 获取并存储在状态中的所有图像 URL 的列表中随机生成一个 URL allMemeImages。在这个函数中，setMemeData用于在每次点击时重新渲染组件，这使得图像在屏幕上变为另一个图像

要在浏览器上显示应用程序，请在文件Meme.js 中导入文件App.js，如下所示。

//App.js

import React from 'react'
import Meme from './Meme.js';
const App =()=> {
  return (
   <Meme />
  )
}
export default App;

此时，您的应用程序应如下所示：

动图

结论

本文讨论useEffect钩子以及如何在 React 应用程序中使用它来调用 API 端点。它解释了 hook 的默认行为useEffect以及如何在使用 hook 时防止无限循环useEffect。
按照以下资源了解有关useEffect挂钩的更多信息。

资源

• 使用 Effect 的完整指南
• 使用效果挂钩