React并发请求处理技巧

本篇文章给大家分享《React并发请求处理：避免状态混乱与性能优化》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

本教程探讨React应用中因并发数据请求导致UI元素乱序渲染的问题。通过分析错误的异步状态更新模式，本文将详细阐述如何利用Promise.all和async/await协调多个API调用，确保数据按预期顺序加载并一次性更新组件状态，从而实现稳定且高效的UI渲染。

理解并发数据请求的陷阱

在React应用中，当我们需要从API获取大量相关数据时，常常会遇到并发请求导致UI渲染顺序混乱的问题。这通常发生在以下两种常见误用模式中：

1. Promise.all 的误用： 开发者可能错误地将非Promise数组传递给Promise.all，或者即使传递了Promise数组，也未正确地等待其结果。例如，原始代码中的Promise.all(data)，其中data实际上是API返回的宝可梦列表（如[{ name: 'bulbasaur', url: '...' }]），而非Promise数组。Promise.all接收到非Promise值时会立即解析，导致后续的异步操作（如单个宝可梦详情的获取）并未被有效地聚合等待。
2. 在异步循环中频繁更新状态： 当你在一个异步操作的循环中（例如，map遍历API返回的列表）多次调用setState来累加数据时，由于网络请求的响应时间不确定，这些状态更新的完成顺序也无法保证。每个setPokedex((currentList) => [...currentList, data])调用都会触发一次组件的重新渲染，并且由于请求是并发的，哪个请求先完成，哪个数据就先被添加到pokedex数组中，从而导致最终渲染的顺序与预期不符。

以下是导致问题发生的原始代码片段的关键部分：

// 原始代码中导致乱序的关键逻辑
const collectPokemon = async (limit: number) => {
  axiosInstance.get(`pokemon?limit=${limit}`).then((res) => {
    const data = res.data.results; // data 是一个对象数组，不是 Promise 数组

    Promise.all(data).then((results) => { // Promise.all(data) 立即解析
      results.map((pkmn) => {
        mapPokemon(pkmn.name); // mapPokemon 返回 Promise，但这些 Promise 未被收集或等待
      });
    });
  });
};

const mapPokemon = async (name: string) => {
  axiosInstance.get(`pokemon/${name}`).then((res) => {
    const data: PokemonType = res.data;
    setPokedex((currentList) => [...currentList, data]); // 每次获取一个宝可梦就更新一次状态
  });
};

这种模式下，mapPokemon函数内部的setPokedex调用会根据各自的网络延迟独立完成，导致最终pokedex数组中的数据顺序与API返回的初始列表顺序不一致。

优化方案：协调异步操作与单次状态更新

解决上述问题的核心在于两点：正确地协调所有异步请求，以及在所有数据准备就绪后一次性更新组件状态。这可以通过结合使用async/await语法和Promise.all来实现。

1. 使用 async/await 简化异步流程： async/await让异步代码看起来更像同步代码，提高了可读性和可维护性。
2. 正确使用 Promise.all 聚合 Promise： Promise.all接收一个Promise数组，并等待所有这些Promise都解决（或其中一个被拒绝）。当所有Promise都解决后，它会返回一个包含所有解决值的数组，且这个数组的顺序与原始Promise数组的顺序一致。
3. 单次状态更新： 在所有数据都已获取并按正确顺序组织好之后，执行一次setPokedex调用，将完整的、有序的数据集合更新到状态中。这避免了多次渲染和竞态条件。

以下是优化后的代码示例：

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
import { PokemonType } from "./models/pokemonType";
import Pokemon from "./components/Pokemon";

function App() {
  const [pokedex, setPokedex] = useState<PokemonType[] | []>([]);
  const limit = 151;

  const axiosInstance = axios.create({
    baseURL: "https://pokeapi.co/api/v2/",
  });

  useEffect(() => {
    // 在组件挂载时调用 collectPokemon
    collectPokemon(limit);
  }, []);

  // 负责收集所有宝可梦数据的主函数
  const collectPokemon = async (limit: number) => {
    try {
      // 1. 获取宝可梦列表（名称和URL）
      const res = await axiosInstance.get(`pokemon?limit=${limit}`);
      const pokemonList = res.data.results;

      // 2. 为每个宝可梦详情创建 Promise
      // mapPokemon 函数现在返回一个 Promise，Promise.all 将等待这些 Promise
      const promises = pokemonList.map((pokemon: { name: string; url: string }) =>
        mapPokemon(pokemon.name)
      );

      // 3. 等待所有宝可梦详情请求完成
      const pokemons = await Promise.all(promises);

      // 4. 一次性更新状态，保证顺序
      setPokedex(pokemons);
    } catch (error) {
      console.error("Failed to collect Pokemon data:", error);
      // 可以在此处添加错误处理逻辑，如设置错误状态，显示错误消息
    }
  };

  // 负责获取单个宝可梦详情的函数
  const mapPokemon = async (name: string): Promise<PokemonType> => {
    const res = await axiosInstance.get(`pokemon/${name}`);
    return res.data; // 直接返回获取到的数据
  };

  console.log(pokedex);

  return (
    <>
      <h1>Pokédex App</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-10 m-10">
        {/* 确保 pokedex 数组中有数据后再进行渲染 */}
        {pokedex.map((mon: PokemonType) => (
          <Pokemon key={mon.id} name={mon.name} id={mon.id} types={mon.types} />
        ))}
      </div>
    </>
  );
}

export default App;

代码详解与最佳实践

让我们详细分解优化后的代码，理解其工作原理和背后的最佳实践。

1. collectPokemon 函数：

   • 这是一个async函数，允许我们使用await关键字来暂停执行，直到Promise解决。
   • 首先，它通过await axiosInstance.get(\pokemon?limit=${limit}`)`获取了宝可梦的初始列表（包含名称和URL）。
   • 接着，pokemonList.map((pokemon) => mapPokemon(pokemon.name))这一行是关键。它遍历了初始列表，并为每个宝可梦的名称调用了mapPokemon函数。重要的是，mapPokemon现在被设计为返回一个Promise（即axiosInstance.get返回的Promise，或者其解决后的数据）。因此，promises变量现在是一个真正的Promise数组，每个Promise都代表着一个获取单个宝可梦详情的异步操作。
   • const pokemons = await Promise.all(promises);：这是确保数据顺序的关键。Promise.all会并行执行promises数组中的所有Promise。它会等待所有这些Promise都成功解决，然后将它们各自的解决值（即每个宝可梦的详细数据）按照原始Promise数组的顺序，收集到一个新的数组pokemons中。
   • setPokedex(pokemons);：一旦所有宝可梦的详细数据都已获取并按正确顺序排列在pokemons数组中，我们才进行一次性的状态更新。这保证了pokedex状态始终包含完整且有序的数据集，从而避免了UI渲染的乱序问题。

2. mapPokemon 函数：

   • 这个函数现在只负责一个单一的任务：根据宝可梦的名称获取其详细数据。
   • 它也是一个async函数，使用await axiosInstance.get(\pokemon/${name}`)`来获取单个宝可梦的数据。
   • 最重要的是，它通过return res.data;直接返回了获取到的数据。由于async函数默认返回一个Promise，这个Promise将会在res.data可用时解决，其解决值就是res.data。

3. 注意事项与最佳实践：

   • 避免在异步循环中频繁调用 setState： 这是导致乱序和性能问题的常见原因。当需要累积或处理大量异步数据时，应先完成所有数据获取和处理，然后进行一次性状态更新。
   • 利用 Promise.all 处理并发请求： 当你需要并行发起多个独立的API请求，并且在所有请求都完成后才进行下一步操作（例如，更新UI或进行数据聚合）时，Promise.all是理想的选择。它能有效利用并发性，同时保证结果的顺序性。
   • 错误处理： 在实际应用中，你还需要为异步操作添加错误处理机制。在collectPokemon函数中添加try...catch块是一个很好的实践，可以捕获任何网络请求或数据处理过程中发生的错误，并进行相应的处理（例如，显示错误消息给用户，或者回滚状态）。
   • 加载状态管理： 对于用户体验而言，在数据加载过程中显示一个加载指示器（loading spinner）是非常重要的。你可以在collectPokemon开始时设置一个isLoading状态为true，在Promise.all完成后（无论成功或失败）将其设置为false。

通过上述优化，我们不仅解决了宝可梦列表乱序渲染的问题，还提升了代码的可读性、可维护性，并遵循了React中处理异步数据流的最佳实践。

总结

正确处理React应用中的异步数据请求对于构建稳定、高性能的用户界面至关重要。本文通过一个具体的案例，深入探讨了在并发数据获取场景下，因不当的异步状态更新策略导致UI元素乱序渲染的问题。我们强调了Promise.all在协调多个并行Promise中的关键作用，以及async/await在简化异步代码方面的优势。核心思想在于：将所有异步数据获取任务聚合起来，等待它们全部完成后，再进行一次性、有序的状态更新。掌握这些模式，将帮助开发者构建更健壮、更可预测的React应用程序。

以上就是《React并发请求处理技巧》的详细内容，更多关于的资料请关注golang学习网公众号！