如何使用 React useEffect 调用加载函数?

react jsjavascript libraryfront end technology更新于 2025/1/1 8:12:17

我们将使用 React useEffect 钩子来调用加载函数。此钩子允许我们指定一个函数，该函数将在组件的特定生命周期事件(例如组件挂载时)中运行。通过将加载函数作为依赖项传递，我们确保该函数在组件加载或更新时都会被调用。

React useEffect

useEffect 是 React 中的一个钩子，允许你将组件与外部系统同步。

它在组件渲染后运行，可用于获取数据、更新 DOM 或设置事件监听器。
它接受两个参数:一个包含 effect 逻辑的函数和一个依赖项列表。
effect 函数应在必要时返回一个清理函数。
useEffect 类似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

方法

你可以通过将加载函数作为依赖项传递，使用 React 的 useEffect 钩子来调用它。在钩子的第二个参数中。加载函数应该在 useEffect 的回调函数中调用。

示例

import { useEffect } from 'react';
function MyComponent() {
   useEffect(() => {
      loadData();
   }, []); // 传递一个空数组以便在挂载时仅调用一次该函数。
   
   function loadData() {
      // 在此处获取数据或执行其他加载逻辑
   }
   
   // ... component render logic
}

您还可以将变量作为依赖项传递给 loadData 函数，这样当依赖项发生变化时，loadData 函数将再次被调用。

import { useEffect } from 'react';

function MyComponent({id}) {
   useEffect(() => {
      loadData(id);
   }, [id]); 
   
   function loadData(id) {
      // 在此处获取数据或执行其他加载逻辑
   }
   
   // ... component render logic
}

需要注意的是，为了避免无限循环，任何由加载函数引起的状态更新都应该在单独的 effect 中完成。

最终代码

这是一个使用 useEffect hook 在 React 组件中加载数据的实际示例 -

App.js

import React, { useEffect, useState } from 'react';
function MyComponent() {
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
      async function fetchData() {
         setIsLoading(true);
         try {
            const response = await fetch('https://jsonplaceholder.typicode.com/users');
            const json = await response.json();
            setData(json);
         } catch (error) {
            console.error(error);
         } finally {
            setIsLoading(false);
         }
      }
      fetchData();
   }, []);
   if (isLoading) {
      return <div style={{ color: 'black' }}>Loading...</div>;
   }
   if (data) {
      return <div style={{ color: 'black' }}>{data.map(item => (<div key={item.id}>
         {item.name}
      </div>))}</div>;
   }
   return <div style={{ color: 'black' }}>No data</div>;
}
export default MyComponent;

在此示例中，MyComponent 组件在首次渲染时使用 useEffect 钩子从 API 加载数据 -

该钩子接受两个参数:一个在组件渲染时运行的回调函数，以及一个确定何时运行 effect 的依赖项数组。
在本例中，我们传递一个空数组作为第二个参数，它告诉 React 在组件首次渲染时只运行一次 effect。
回调函数 fetchData 首先将 isLoading 状态设置为 true，这会导致组件显示"正在加载..."消息。
然后，它使用 fetch API 从 API 加载数据并等待响应完成。
然后，它解析响应中的 JSON 数据，并使用解析后的数据设置数据状态。
如果发生错误，将错误记录到控制台。最后，它将 isLoading 状态设置为 false，这会导致组件显示已加载的数据，如果 API 返回的是空数据或错误，则显示"无数据"消息。
组件会根据当前状态呈现不同的消息:正在获取数据时显示"正在加载…"，加载完成后显示数据本身，如果 API 返回的是空数据或错误，则显示"无数据"。
请注意，此示例使用 async/await 来处理 fetch API 返回的 promise，如果您使用的是旧版本的 JavaScript，则可以使用 then() 和 .catch() 方法。