Conseils pour rendre vos applications React plus rapides !

Bonjour à tous, dans cet article de blog, je vais partager quelques astuces pour rendre votre application React plus rapide que vous ne le pensez ! En suivant ces bonnes pratiques, vous pouvez améliorer considérablement les performances de votre application React tout en garantissant son évolutivité et sa maintenabilité. Passons directement à quelques approches intéressantes dans les applications d'entreprise :

La merveilleuse utilisation de React.memo

Utilisez React.memo pour envelopper les composants fonctionnels afin d'éviter un nouveau rendu inutile lorsque les accessoires restent inchangés.

<code class="language-javascript">import React from 'react';

const ChildComponent = React.memo(({ count }) => {
  console.log('Rendered Child');
  return <div>Count: {count}</div>;
});

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount((p) => p + 1)}>Increment</button>
      <ChildComponent count={count} />
    </div>
  );
};</code>

Gérer correctement le statut✅

Promotion de l'état : placez l'état uniquement là où cela est nécessaire pour éviter un état redondant dans des composants profondément imbriqués.

<code class="language-javascript">const Child = ({ onIncrement }) => (
  <button onClick={onIncrement}>Increment</button>
);

const Parent = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount((p) => p + 1);

  return (
    <div>
      <h1>Count: {count}</h1>
      <Child onIncrement={increment} />
    </div>
  );
};</code>

Suspense et React.lazy, la puissance du découpage de code

Importez dynamiquement les composants et chargez-les uniquement en cas de besoin, réduisant ainsi la taille initiale du package.

<code class="language-javascript">import React, { Suspense } from 'react';
import Loader from './Loader';

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

const App = () => (
  <Suspense fallback={<Loader />}>
    <ProductsList />
  </Suspense>
);</code>

L'importance de la Clé !

Aide React à reconnaître les changements en rendant uniques tous les éléments du tableau rendus.

<code class="language-javascript">const ProductsList = ({ products }) => (
  <ul>
    {products.map((p) => (
      <li key={p.id}> - {p.name}</li>
    ))}
  </ul>
);</code>

La virtualisation est votre bonne aide

Utilisez la virtualisation lors du rendu de grandes quantités de données.

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

const items = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`);

const Row = ({ index, style }) => (
  <div style={style}>
    <p>{items[index]}</p>
  </div>
);

const MyList = () => (
  <List height={300} width={300} itemSize={35} itemCount={items.length}>
    {Row}
  </List>
);</code>

En utilisant les méthodes ci-dessus, votre application React deviendra ultra rapide, vous permettant de vous démarquer et de saisir plus d'opportunités. Merci d'avoir lu. Si cet article vous est utile, n'hésitez pas à l'aimer !

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!