Maison > interface Web > js tutoriel > Modèles de performances EACT que chaque développeur devrait voler (et comment les mettre en œuvre)

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

Mary-Kate Olsen
Libérer: 2025-01-28 12:30:12
original
772 Les gens l'ont consulté

eact Performance Patterns Every Developer Should Steal (and How to Implement Them)

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.

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} />;
};
Copier après la connexion

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.


  1. 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.

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

const Dashboard = () => (
  <React.Suspense fallback={<Spinner />}>
    {showCharts && <HeavyChartLibrary />}
  </React.Suspense>
);
Copier après la connexion

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


  1. 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.

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>
);
Copier après la connexion

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


  1. 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:

setCount(1);
setText('Updated'); // Single re-render
Copier après la connexion

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


  1. 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.

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;
};
Copier après la connexion

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


  1. 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.


  1. 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal