Comment utiliser Suspense dans React pour un rendu asynchrone amélioré

Suspense dans React

React Suspense est une fonctionnalité puissante qui permet aux développeurs de gérer le rendu asynchrone avec élégance en affichant une interface utilisateur de secours pendant le chargement des composants ou des données. Il fonctionne main dans la main avec les solutions React.lazy, Concurrent Rendering et Data Fetching telles que React Query, Relay ou des implémentations personnalisées.

---

Comment fonctionne le suspense

1. Placeholder Fallback : le suspense s'enroule autour des composants qui doivent attendre des opérations asynchrones. Pendant l'attente, il affiche une interface utilisateur de secours (par exemple, une icône de chargement).
2. Rendu automatique : Une fois l'opération asynchrone terminée, le composant ou les données réels sont rendus.

---

Syntaxe de base

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

export default App;

• React.Suspense : s'enroule autour des composants chargés paresseux.
• fallback : Spécifie l'interface utilisateur à afficher en attendant le chargement du composant.

---

Utiliser des cas de suspense

1. Lazy Loading Components : Chargement dynamique de composants avec React.lazy.
2. Récupération de données : gestion du chargement de données asynchrone lorsqu'il est combiné avec des bibliothèques comme Relay ou React Query.
3. Rendu simultané : optimisation du rendu dans les modes React simultanés.

---

Exemple 1 : chargement paresseux avec suspense

Sans suspense

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1 id="Main-App">Main App</h1>
      <heavycomponent></heavycomponent>
    </div>
  );
}

export default App;

Le HeavyComponent se charge de manière synchrone, augmentant ainsi le temps de chargement initial.

Avec suspense

import React, { Suspense } from "react";

const HeavyComponent = React.lazy(() => import("./HeavyComponent"));

function App() {
  return (
    <div>
      <h1 id="Main-App">Main App</h1>
      <suspense fallback="{<div">Loading Heavy Component...</suspense>
</div>}>
        <heavycomponent></heavycomponent>
      
    
  );
}

export default App;

Désormais, le HeavyComponent se charge uniquement lorsque cela est nécessaire, affichant une solution de repli pendant le processus de chargement.

---

Exemple 2 : Suspense avec plusieurs composants paresseux

import React, { Suspense } from "react";

const ComponentA = React.lazy(() => import("./ComponentA"));
const ComponentB = React.lazy(() => import("./ComponentB"));

function App() {
  return (
    <div>
      <h1 id="Main-App">Main App</h1>
      <suspense fallback="{<div">Loading Components...</suspense>
</div>}>
        <componenta></componenta>
        <componentb></componentb>
      
    
  );
}

export default App;

L'interface utilisateur de secours s'affiche jusqu'à ce que les les deux composants terminent le chargement.

---

Exemple 3 : Suspense pour la récupération de données (expérimental)

React Suspense est également utile pour la récupération de données asynchrone lorsqu'il est intégré à des bibliothèques telles que Relay ou React Query.

Exemple avec React Query

import React, { Suspense } from "react";
import { useQuery } from "react-query";

function DataComponent() {
  const { data } = useQuery("fetchData", fetchData);

  return <div>{data}</div>;
}

function App() {
  return (
    <suspense fallback="{<div">Loading data...}>
      <datacomponent></datacomponent>
    </suspense>
  );
}

export default App;

---

Gestion des erreurs avec suspense

Si une erreur se produit lors du chargement de composants ou de données, React Suspense ne fournit pas de gestion intégrée des erreurs. Utilisez une limite d'erreur à cet effet.

import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <suspense fallback="{<div">Loading...}>
      <lazycomponent></lazycomponent>
    </suspense>
  );
}

export default App;

---

Meilleures pratiques d’utilisation du suspense

1. Solutions de secours simples : utilisez des espaces réservés légers pour éviter une surcharge de performances.
2. Combiner avec les limites d'erreur : garantissez une gestion appropriée des échecs de chargement de composants ou de données.
3. Chunk Intelligently : divisez votre application en morceaux logiques pour de meilleures performances.

---

Avantages du suspense

1. Expérience utilisateur améliorée : garantit que l'application reste réactive en affichant une interface utilisateur de secours.
2. Taille du bundle réduite : fonctionne bien avec le fractionnement du code pour des tailles de bundle optimisées.
3. Gestion asynchrone simplifiée : gère les états de chargement de manière plus déclarative.

---

Utilisation avancée : Suspense imbriqué

Vous pouvez imbriquer plusieurs composants Suspense pour un contrôle granulaire des états de secours.

import React from "react";
import HeavyComponent from "./HeavyComponent";

function App() {
  return (
    <div>
      <h1 id="Main-App">Main App</h1>
      <heavycomponent></heavycomponent>
    </div>
  );
}

export default App;

---

Limites du suspense

1. Prise en charge de la récupération de données : fonctionnalité expérimentale pour récupérer directement des données.
2. Aucune gestion des erreurs : nécessite des mécanismes de gestion des erreurs supplémentaires tels que les limites d'erreur.
3. Compatibilité des navigateurs : nécessite des navigateurs modernes prenant en charge les modules et les promesses ES6.

---

Conclusion

React Suspense est un outil polyvalent permettant de gérer le rendu asynchrone dans les applications React. Il simplifie la gestion des états de chargement, améliore les performances grâce au chargement paresseux et crée une expérience utilisateur plus fluide lorsqu'il est combiné avec des techniques de fractionnement de code et de gestion des erreurs.

---

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!