Composant pur dans React.js

Garder la pureté des composants est un principe fondamental de React et de la programmation fonctionnelle. Voici une exploration plus approfondie du concept de pureté des composants, y compris les avantages et les stratégies pour maintenir la pureté de vos composants React.

Garder les composants purs dans React

Que sont les fonctions pures ?

Une fonction pure est une fonction qui :

1. Déterministe : étant donné la même entrée, il produit toujours la même sortie.
2. Aucun effet secondaire : il ne provoque aucun effet secondaire, tel que la modification de l'état externe ou l'interaction avec le monde extérieur (par exemple, effectuer des appels API, manipuler le DOM).

Pourquoi utiliser des composants purs ?

1. Prévisibilité : Les composants purs se comportent de manière cohérente. Vous pouvez vous fier à leurs résultats, ce qui simplifie le raisonnement sur l'application.

2. Tests plus faciles : Étant donné que les composants purs sont prévisibles et n'ont aucun effet secondaire, ils sont plus faciles à tester. Vous pouvez tester directement la sortie en fonction des accessoires d'entrée sans vous soucier des changements d'état externes.

3. Optimisation des performances : Les composants purs aident à optimiser le rendu. React peut déterminer efficacement si un composant doit être restitué en fonction des modifications apportées aux accessoires.

4. Maintenabilité : à mesure que votre base de code se développe, la maintenance des composants purs devient plus simple. Ils encapsulent les fonctionnalités sans dépendances cachées, ce qui facilite le débogage et la refactorisation.

5. Réutilisation : Les composants purs sont hautement réutilisables car ils ne dépendent pas d'états externes. Vous pouvez facilement les utiliser dans différents contextes.

Comment garder les composants purs

Voici quelques stratégies pour garantir que vos composants restent purs :

1. Évitez les effets secondaires :
   • Ne modifiez pas directement les accessoires ou l'état global.
   • Évitez les opérations asynchrones à l'intérieur de la méthode de rendu (par exemple, les appels API, les minuteries).

   const PureComponent = ({ count }) => {
     // Pure function: does not cause side effects
     return <div>{count}</div>;
   };

1. Utilisez React.memo :
   • Enveloppez les composants fonctionnels avec React.memo pour éviter les nouveaux rendus inutiles lorsque les accessoires n'ont pas changé.

   const PureGreeting = React.memo(({ name }) => {
     return <h1>Hello, {name}!</h1>;
   });

1. Accessoires de déstructuration :
   • Déstructurez les accessoires dans la liste des paramètres du composant pour garder la structure du composant propre et ciblée.

   const PureButton = ({ label, onClick }) => {
     return <button onClick={onClick}>{label}</button>;
   };

1. Lever l'état vers le haut :
   • Gérez l'état des composants parents et transmettez les gestionnaires de données et d'événements requis aux composants enfants. Cela maintient les composants enfants purement fonctionnels.

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

     return <PureCounter count={count} setCount={setCount} />;
   };

1. Évitez les fonctions en ligne dans le rendu :
   • Au lieu de définir des fonctions en ligne dans la méthode de rendu, définissez-les à l'extérieur. Cela empêche la création de nouvelles instances de fonction à chaque rendu, ce qui peut conduire à de nouveaux rendus inutiles.

   const PureCounter = React.memo(({ count, setCount }) => {
     return <button onClick={() => setCount(count + 1)}>Increment</button>;
   });

1. Évitez la mutation directe de l'état :
   • Utilisez des méthodes qui renvoient de nouveaux états plutôt que de muter directement l'état existant. Cela correspond aux principes d’immuabilité.

   const handleAddItem = (item) => {
     setItems((prevItems) => [...prevItems, item]); // Pure approach
   };

Exemple de composant pur

Voici un exemple complet de composant fonctionnel pur qui suit ces principes :

import React, { useState } from 'react';

const PureCounter = React.memo(({ count, onIncrement }) => {
  console.log('PureCounter Rendered');
  return <button onClick={onIncrement}>Count: {count}</button>;
});

const App = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <div>
      <h1>Pure Component Example</h1>
      <PureCounter count={count} onIncrement={handleIncrement} />
    </div>
  );
};

export default App;

Conclusion

Garder la pureté des composants dans React simplifie non seulement le développement, mais améliore également les performances et la maintenabilité. En adhérant aux principes des fonctions pures, vous pouvez créer des composants prévisibles, réutilisables et faciles à tester. Suivre les meilleures pratiques comme éviter les effets secondaires, utiliser React.memo et gérer l'état de manière appropriée peut vous aider à créer une application robuste et vendable.

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!