Modèles de performances EACT que chaque développeur devrait voler (et comment les mettre en œuvre)

L'augmentation des performances de l'application React est cruciale pour une expérience utilisateur positive. Cet article décrit sept modèles de performance éprouvés glanés d'optimiser de nombreuses applications de réaction de production.

---

1. Mémuisation avec useMemo et useCallback:

PROBLÈME: REFENDANTS INUTÉRES DU PROPS INCHANGÉS OU STAT.

SOLUTION: CACHE Operations et références de fonctions coûteuses en calcul.

<code class="language-javascript">const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return <ChildComponent onClick={handleClick} />;
};</code>

Best Practices: Utiliser avec React.memo pour les composants enfants pour éviter les mises à jour inutiles de sous-arbre. Idéal pour les calculs complexes (tri, filtrage), les rappels transmis aux enfants optimisés et les valeurs de fournisseur de contexte stables.

---

2. Chargement paresseux et division du code:

Problème: Grande taille initiale du bundle impactant la première peinture contente (FCP).

Solution: Imports dynamiques et Suspense pour le chargement à la demande.

<code class="language-javascript">const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  <React.Suspense fallback={<Spinner />}>
    {showCharts && <HeavyChartLibrary />}
  </React.Suspense>
);</code>

Advanced: Intégrer avec le routeur React pour le fractionnement du code basé sur l'itinéraire.

---

3. Listes virtualisées pour les grands ensembles de données:

Problème: Le rendu des milliers d'éléments submerge le dom.

Solution: react-window ne rend que les éléments visibles.

<code class="language-javascript">import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  <FixedSizeList height={600} itemCount={items.length} itemSize={35} width="100%">
    {({ index, style }) => (
      <div style={style}>...</div>
    )}
  </FixedSizeList>
);</code>

bonus: Utiliser VariableSizeList pour les hauteurs de ligne dynamiques et react-virtualized-auto-sizer pour les conteneurs réactifs.

---

4. Gestion efficace de l'état:

PROBLÈME: Multipul State Mises à jour provoquant des redesseurs en cascade.

SOLUTION: Levier React 18's Automatic Batching.

réagir 18:

<code class="language-javascript">setCount(1);
setText('Updated'); // Single re-render</code>

PRE-REACT 18 ou pour les scénarios complexes: Utiliser useReducer pour les mises à jour de l'état atomique.

---

5. API API Debouncing:

Problème: Demandes API excessives de l'entrée rapide de l'utilisateur (par exemple, barres de recherche).

Solution: Un crochet personnalisé useDebounce.

<code class="language-javascript">import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};</code>

CONSEIL PRO: combiner avec AbortController pour annuler les demandes en attente.

---

6. API de contexte optimisé:

PROBLÈME: Re-inutiles redesseurs des consommateurs de contexte en raison de changements non liés.

SOLUTION: Fraction des contextes et des valeurs du fournisseur de mémoire.

---

7. Mises à jour de l'interface utilisateur optimistes:

Problème: UI lent en attendant les réponses de l'API.

Solution: Fournir une rétroaction visuelle immédiate et un retour sur l'erreur.

---

Liste de contrôle des performances:

1. REFORMES DE PROFIL AVEC REACT DEVTOOLS Profiler.
2. Analyser la taille du bundle avec une map-explorer.
3. Test avec l'onglet Performance de Chrome (étranglement du processeur).
4. utiliser React.memo, useMemo, useCallback stratégiquement.
5. Implémentez le chargement incrémentiel.
6. Optimiser les images / supports avec chargement paresseux.
7. Considérons le rendu côté serveur pour le contenu critique.

N'oubliez pas: Profil d'abord, optimisez-vous en seconde! Ces techniques sont applicables dans divers cadres React (Next.js, Gatsby, etc.).

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!