在 React useEffect 挂钩中有多个 API 获取请求总是很慢吗？答案

【问题标题】：Is having more than one API fetch request in a React useEffect hook always very slow?在 React useEffect 挂钩中有多个 API 获取请求总是很慢吗？
【发布时间】：2023-02-08 22:18:19
【问题描述】：

我正在使用 React 编写一个简单的应用程序来从 Star Wars API 获取和显示数据。我首先获取有关特定行星的信息。给定行星的响应 JSON 包含一堆数据，包括指向有关该行星著名居民的更多数据的 URL 数组。接下来，我调用每个 URL 以显示当前星球上居民姓名的列表。

这段代码有效，但速度很慢：

const url = `https://swapi.dev/api/planets/`;

const [currentPlanetNumber, setCurrentPlanetNumber] = React.useState(1);
const [currentPlanet, setCurrentPlanet] = React.useState({});
const [currentPlanetResidentsDetails, setCurrentPlanetResidentsDetails] =
  React.useState([]);

React.useEffect(() => {
  (async () => {
    const planetData = await fetch(`${url}${currentPlanetNumber}/`).then(
      (response) => response.json()
    );
    setCurrentPlanet(planetData);

    if (planetData.residents.length === 0) {
      setCurrentPlanetResidentsDetails(["No notable residents"]);
    } else {
      const residentsURLs = planetData.residents;
      const residentsNames = await Promise.all(
        residentsURLs.map(async (item) => {
          const name = await fetch(item).then((response) => response.json());
          const newName = name.name;
          return newName;
        })
      );
      setCurrentPlanetResidentsDetails(residentsNames);
    }
  })();
}, [currentPlanetNumber]);

以下代码为此工作得相当快：

const url = `https://swapi.dev/api/planets/`;

const [currentPlanetNumber, setCurrentPlanetNumber] = React.useState(1);
const [currentPlanet, setCurrentPlanet] = React.useState({});
const [currentPlanetResidentsDetails, setCurrentPlanetResidentsDetails] =
  React.useState([]);

React.useEffect(() => {
  (async () => {
    const planetData = await fetch(`${url}${currentPlanetNumber}/`).then(
      (response) => response.json()
    );
    setCurrentPlanet(planetData);
  })();
}, [currentPlanetNumber]);

React.useEffect(() => {
  (async () => {
    if (currentPlanet.residents.length === 0) {
      setCurrentPlanetResidentsDetails(["No notable residents"]);
    } else {
      const residentsURLs = currentPlanet.residents;
      const residentsNames = await Promise.all(
        residentsURLs.map(async (item) => {
          const name = await fetch(item).then((response) => response.json());
          const newName = name.name;
          return newName;
        })
      );
      setCurrentPlanetResidentsDetails(residentsNames);
    }
  })();
}, [currentPlanet]);

是什么让第二个更快？我假设它们都将花费相同的时间长度，因为无论哪种方式都完成了相同数量的提取请求。

对于任何给定的 useEffect 挂钩，不超过一个获取请求是否是一个好的经验法则？

【问题讨论】：

标签： performance react-hooks fetch

【解决方案1】：

不，没有经验法则规定在给定的useEffect 中不能有多个提取请求。

在您的第一个示例中，获取请求是连续触发的，而在第二个示例中，它们是同时触发的。

你的第一个例子似乎比第二个更合适。在第二个示例中，在您看来代码执行得更快，因为组件安装时两种效果同时触发。在对“currentPlanetNumber”进行后续更改时，两个示例的执行时间应该相同。

【讨论】：