Chargement paresseux de React.js : EXPLIQUÉ-js tutoriel-php.cn

Un guide complet avec une aide-mémoire et un exemple

Brève introduction

Le chargement différé est une technique d'optimisation des performances efficace dans le développement Web, en particulier avec des bibliothèques et des frameworks comme React. Cela implique de charger des composants ou des ressources uniquement lorsque cela est nécessaire, soit en réponse à une action de l'utilisateur, soit lorsque des éléments sont sur le point d'être affichés à l'écran. Cela peut réduire le temps de chargement initial de l'application, diminuer la consommation de ressources et améliorer l'expérience utilisateur, en particulier sur les appareils aux performances limitées ou aux connexions Internet lentes.

Comment fonctionne le chargement paresseux dans React

React implémente le chargement paresseux principalement via la fonction React.lazy. Il est souvent utilisé en combinaison avec React.Suspense, qui gère l'état de chargement et l'interface utilisateur de secours. Vous trouverez ci-dessous les étapes clés pour comprendre comment implémenter le chargement paresseux dans une application React.

React.js Lazy Loading: EXPLAINED
1. Importation dynamique avec React.lazy

React.lazy permet l'importation dynamique de composants uniquement lorsque cela est nécessaire. Le résultat est une promesse qui se résout en un module contenant un composant React par défaut.

const DelayedComponent = React.lazy(() => import('./DelayedComponent'));

Copier après la connexion

Dans cet exemple, DelayedComponent est chargé uniquement lorsque React tente de le restituer pour la première fois.

2. Emballage avec React.Suspense

Pour gérer l'état de chargement, React.Suspense est utilisé pour envelopper les composants chargés paresseusement. Cela vous permet d'afficher du contenu de secours (par exemple, une icône de chargement) pendant le chargement du composant.

import React, { Suspense } from 'react'; function App() { return (  Loading content...
}>

); }

Copier après la connexion

Dans l'extrait ci-dessus, attend que DelayedComponent se charge avant de l'afficher. Si le chargement prend du temps, l'utilisateur verra "Chargement du contenu...".

Avec le chargement paresseux, la gestion des erreurs est essentielle en cas de panne (par exemple, une panne de réseau). Vous pouvez afficher un message d'erreur ou un composant de secours si quelque chose ne va pas pendant le processus de chargement.

Le chargement différé est particulièrement utile dans le contexte du routage, où différents écrans ou composants sont chargés en fonction de l'URL. Avec des routeurs comme React Router, vous pouvez utiliser React.lazy pour charger dynamiquement des composants pour chaque itinéraire.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense } from 'react'; const HomeView = React.lazy(() => import('./HomeView')); const AboutView = React.lazy(() => import('./AboutView')); function App() { return ( Loading views...