Chargement paresseux et mémorisation | ReactJS | Partie 1

Comparaison du chargement paresseux et de la mémoïsation dans le contexte de ReactJS, avec des définitions, des cas d'utilisation et des exemples :

---

Chargement paresseux

Définition

Le chargement paresseux dans React fait référence à la pratique consistant à charger des composants ou des ressources uniquement lorsqu'ils sont nécessaires, plutôt qu'au chargement initial de la page. Cela réduit le temps de chargement initial et améliore les performances.

Points clés

Objectif : réduire la taille initiale du bundle et optimiser les performances.

Lorsque utilisé : pour les composants ou les ressources qui ne sont pas immédiatement requis (par exemple, un modal ou une image dans un onglet masqué).

Fonctionnalité React : obtenue en utilisant React.lazy et Suspense.

Exemple : Chargement paresseux d'un composant

importer React, { Suspense } depuis 'react';

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

const App = () => {
retour (

Bienvenue sur mon application

Chargement...}>



);
} ;

exporter l'application par défaut ;

Comportement : HeavyComponent ne sera chargé que lors de son rendu.

---

Mémoisation

Définition

La mémorisation dans React est le processus de mise en cache du résultat du rendu d'une fonction ou d'un composant pour éviter de le recalculer ou de le restituer inutilement. Il contribue à améliorer les performances en évitant les opérations redondantes.

Points clés

Objectif : éviter les recalculs ou les nouveaux rendus coûteux.

Lorsque utilisé : pour les fonctions ou composants coûteux en termes de calcul qui reçoivent les mêmes accessoires à plusieurs reprises.

Fonctionnalités React : obtenues à l'aide de useMemo, useCallback et React.memo.

Exemple : Mémoriser un composant

importer React, {useMemo } depuis 'react';

const ExpensiveCalculation = ({ nombre }) => {
const calculer = (num) => {
console.log('Calcul...');
renvoyer num * 2 ; // Simuler une opération coûteuse
};

const result = useMemo(() => calculate(number), [number]);

retour

Résultat : {result};
} ;

exporter le calcul coûteux par défaut ;

Comportement : le calcul n'est exécuté que lorsque le nombre prop change, évitant ainsi les calculs redondants.

---

Quand les utiliser ?

Chargement paresseux :
À utiliser lorsque votre application comporte des composants ou des ressources volumineux qui peuvent être différés jusqu'à ce que vous en ayez besoin (par exemple, des graphiques de tableau de bord ou des galeries contenant beaucoup d'images).

Mémoisation :
À utiliser lorsque votre application effectue des calculs répétés ou restitue inutilement des composants en raison d'accessoires ou d'un état inchangés.

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!