Mon parcours React : jour 26

Méthodes de cycle de vie et rendu conditionnel

Aujourd'hui marque une autre étape dans mon parcours d'apprentissage React, et tout tourne autour des méthodes de cycle de vie et du rendu conditionnel. Comprendre comment les composants React naissent, grandissent et finissent par quitter le DOM a changé la donne pour moi. Ajoutez à cela la possibilité d'afficher du contenu de manière conditionnelle en fonction des interactions des utilisateurs, et tout à coup, créer des applications dynamiques et conviviales est si agréable !

Méthodes de cycle de vie dans les composants fonctionnels React
Le cycle de vie comporte 3 étapes :

1.Étape initiale (phase de montage) :

• Se produit lorsque le composant s'affiche pour la première fois.
• useEffect avec un tableau de dépendances vide ([]) ne s'exécute que pendant cette phase. Exemple :

useEffect(() => {
  console.log("Component mounted");
}, []);

2.Étape de mise à jour :

• Déclenché lorsque l'état ou les accessoires changent.
• React réexécute votre composant de fonction, recalcule les états et transmet les accessoires mis à jour.
• Utilisez useEffect avec des dépendances spécifiques pour gérer les modifications :

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3. Phase de sortie/démontage :

• Se produit lorsque le composant est supprimé du DOM.
• Un code de nettoyage peut être ajouté dans la fonction de retour de useEffect pour libérer de la mémoire. Exemple :

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

Rendu conditionnel

Cette technique est essentielle pour le rendu dynamique de composants ou d'éléments en fonction de conditions.

Opérateur Ternaire
Exemple de salutations utilisateur :

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

Évaluation des courts-circuits
Pour des conditions plus simples, vous pouvez utiliser && pour afficher les composants uniquement lorsqu'une condition est vraie :

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

Styles conditionnels en ligne
Vous pouvez également styliser dynamiquement les composants :

const messageStyle = props.isLoggedIn
  ? { couleur : "vert" }
  : { couleur : "rouge" };

retour <h2>



<p><em>Cela ne cesse de s'améliorer de jour en jour</em></p>


          

            
        

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!