Comprendre le comportement de lancement de promesses héritées dans React

React est une bibliothèque JavaScript puissante et polyvalente utilisée pour créer des interfaces utilisateur. L'une de ses fonctionnalités modernes, Suspense, permet aux composants de gérer les données asynchrones avec élégance. Cependant, le concept de « comportement de lancement de promesses héritées » dans React est souvent source de confusion parmi les développeurs. Cet article de blog vise à expliquer ce qu'implique ce comportement, comment il s'intègre dans le processus de rendu de React et pourquoi il est important de comprendre lorsqu'on travaille avec des fonctionnalités simultanées.

Qu’est-ce que le comportement de lancement de promesses héritées ?

Legacy Promise Throwing Behavior fait référence au mécanisme par lequel les composants React « lancent » une promesse pendant le rendu. Cela indique à React que le composant attend que certaines données asynchrones soient résolues avant de pouvoir être entièrement restituées.

Lorsqu'une promesse est lancée, React suspend le rendu de cette partie de l'arborescence des composants et restitue à la place une interface utilisateur de secours, si elle est définie, à l'aide de Suspense. Une fois la promesse résolue, React restitue le composant avec les données résolues.

Principales caractéristiques du lancement de promesses héritées :

1. Lancer des promesses pendant le rendu : les composants peuvent indiquer qu'ils attendent des données en lançant une promesse.
2. Intégration avec Suspense : ce comportement fonctionne de manière transparente avec Suspense pour afficher le contenu de secours.
3. Gestion des données asynchrones : il fournit un moyen déclaratif de gérer la récupération de données asynchrones dans le cycle de vie de rendu de React.

Comment ça marche ?

Examinons étape par étape le fonctionnement de ce comportement :

1. Le composant lance une promesse : lors du rendu, un composant rencontre une promesse et la lance.
2. Rendu en pause : React arrête le rendu pour cette branche de l'arborescence des composants.
3. UI de secours : si une limite Suspense est présente, React affiche l'interface utilisateur de secours.
4. La promesse est résolue : une fois la promesse résolue, React reprend le rendu et intègre les données résolues.

Exemple de lancement de promesses héritées

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

export default App;

Explication :

1. Récupération de données : le hook useData récupère les données de manière asynchrone à l'aide de la fonction fetchData.
2. Lancer une promesse : si les données ne sont pas encore disponibles, la promesse est lancée.
3. Suspense Fallback : le composant Suspense affiche "Chargement en cours..." jusqu'à ce que la promesse soit résolue.
4. Données résolues : une fois la promesse résolue, AsyncComponent restitue les données chargées.

Fonctionnalités modernes de réaction et simultanées

React 18 a introduit le rendu simultané, qui affine le fonctionnement du lancement de promesses. Les principales améliorations incluent :

1. Time-Slicing : le rendu simultané de React divise le travail en morceaux plus petits, gardant l'interface utilisateur réactive même en attendant des données asynchrones.
2. Limites de suspense contrôlées : les limites de suspense gèrent le lancement des promesses avec plus de grâce.
3. Gestion des erreurs améliorée : meilleures limites d'erreur pour les composants qui ne parviennent pas à récupérer les données.

Meilleures pratiques

Bien que Legacy Promise Throwing soit à la base de Suspense, les développeurs doivent utiliser des bibliothèques et des modèles modernes pour une meilleure expérience :

Utilisez React Query ou SWR

Les bibliothèques comme React Query et SWR fournissent des solutions robustes pour la récupération, la mise en cache et la synchronisation des données, éliminant ainsi le besoin de lancer manuellement des promesses.

Tirer parti de Hook (React 18)

React 18 a introduit le hook d'utilisation (expérimental) pour gérer les promesses de manière plus propre et déclarative.

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

export default App;

Évitez de lancer des promesses directement

Lancer des promesses manuellement peut entraîner des problèmes inattendus, en particulier dans des environnements non simultanés. Au lieu de cela, comptez sur des bibliothèques ou des utilitaires qui résument ces complexités.

Enveloppez le suspense pour la réutilisabilité

Encapsulez la logique Suspense dans des composants réutilisables pour un code plus propre :

function AsyncComponent() {
  const data = use(fetchData());
  return <div>{data}</div>;
}

Conclusion

Legacy Promise Throwing Behavior est la pierre angulaire de la fonctionnalité Suspense de React, permettant une gestion transparente des données asynchrones pendant le rendu. Cependant, à mesure que React évolue, les outils et les modèles de gestion des opérations asynchrones évoluent également. En comprenant ce comportement et en tirant parti des pratiques modernes, les développeurs peuvent créer des applications efficaces, réactives et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!