UseEffect Dans les coulisses de React

Avant d'en savoir plus sur useEffect et une compréhension approfondie de React. Je vous recommande de vous familiariser avec ces concepts de javascript.

https://www.geeksforgeeks.org/top-javascript-concepts-to-know-before-learning-react/

En tant que développeurs React, l'un des concepts les plus importants est de comprendre comment fonctionne useEffect.

Principes d'utilisationEffet

UseEffect est utilisé pour effectuer des effets secondaires dans notre composant React.

Qu'est-ce qu'un effet secondaire ?

Un effet secondaire fait référence à toute opération qui interagit avec le monde en dehors des limites d'un composant React.

Nous réalisons un effet secondaire lorsque nous devons sortir d'un composant de réaction pour faire quelque chose !!

Quelques effets secondaires courants :

• Récupération de données depuis l'API.
• Mise à jour du document et de la fenêtre DOM.
• Fonctions de minuterie setTimeout et setInterval.

La signature de useEffect dans React :

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

Ou ne fonctionne qu'avec ce code :

useEffect(() => { 
    // execute side effect
})

Après avoir donné quelques théories de base sur useEffect, vérifions un peu de pratique !!

Un exemple simple avec useEffect :

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `${count} new messages!`;
    })


    return (
        <>
            <h3>{ count } new Messages!</h3>   
            <button onClick={ () => setCount(count + 1) }>Increase</button>
        </>
  )
}

Que faisons-nous dans ce code ?

• Le composant s'affiche initialement avec un nombre défini sur 0.

• Le hook useEffect met à jour le titre du document à « 0 nouveau message ! »

Lorsque le bouton est cliqué :

• La fonction setCount est appelée, incrémentant l'état du comptage.
• Le composant est restitué avec la valeur de comptage mise à jour.
• Le hook useEffect se déclenche à nouveau, mettant à jour le titre du document pour refléter le nouveau décompte.
• Ce code démontre l'utilisation de base des hooks useState et useEffect dans React pour gérer l'état et effectuer des effets secondaires, en créant un compteur simple qui met à jour le titre du document.

Le useEffect s'exécutera à chaque modification du composant.

UseEffect avec un tableau vide

Nous allons faire un petit changement dans le code :

  useEffect(() => {
        document.title = `${count} new messages!`;
        console.log('Run useEffect');
    }, [])

Nous ajoutons un tableau vide dans les paramètres de useEffect.

• Il ne s'exécutera que lorsque le composant sera créé ou initialisé.

C'est très utile lorsque nous récupérons des données, dans ce cas nous savons que nous ne devons exécuter la partie de code qu'une seule fois.

useEffect avec des variables

Une variante de useEffect consiste à ajouter une variable (une et plusieurs).
Lorsque cette variable change, la partie du code sera exécutée.

Vérifions un exemple :

import {useState, useEffect} from "react";

export default function App() {
    const [count, setCount] = useState(0);
    const [newCount, setNewCount] = useState(5);

    useEffect(() => {
        document.title = `${newCount} new messages!`;
        console.log('Run useEffect');
    }, [newCount])


    return (
        <div>
           <>
              <h3>{ count } new Messages!</h3>   
              <button onClick={ () => setCount(count + 1) }>Increase</button>
          </>

          <>
              <h3>{ newCount } new Messages!</h3>   
              <button onClick={ () => setNewCount(newCount + 5) }>Increase</button>
          </>
        </div>

  )
}

Nous avons ajouté une nouvelle variable avec useState et ajouté useEffect en fonction de newCount.

Il sera rendu dans ce cas :

• Au début du composant pour définir newCount sur le titre de la page.
• Après avoir détecté le changement sur newCount var.

Remarque : vous pouvez transmettre plus de variables en ajoutant une virgule

useEffect(
    () => {
        // execute side effect
    },
    // optional dependency array
    [
        // 0 or more entries
    ] 
)

UseEffect avec fonction cleanUp

Dans certains cas, nous devons nettoyer certaines fonctionnalités comme les promesses.

Nous allons approfondir cela avec un exemple.

Créez une minuterie et affichez-la dans la page.

Nous pouvons le faire avec setInterval, mais si nous n'implémentons pas le nettoyage, le minuteur consommera des ressources et l'application sera lente.

Nous devons donc renvoyer le clearInterval.

Ici, nous avons le code.

useEffect(() => { 
    // execute side effect
})

Conclusion :

Un petit résumé sur useEffect.

useEffect.-

UseEffect est utilisé pour effectuer des effets secondaires dans un composant de réaction.

Les effets secondaires pourraient être :

• Récupération de données depuis l'API
• Mise à jour du dom - document, fenêtre
• Événements de minuterie - setInterval, setTimeOut

useEffect(rappel, dépendances)

1 Où le rappel est la fonction - logique sideEffect - Que exécuter.
2 Dépendances - Tableau de variables (facultatif) - Quand exécuter.

Enfin, nous avons trois variantes de useEffect :

1. UseEffect sans dépendances - Il s'exécute avec le premier rendu et s'exécute également sur toutes les modifications détectées.

2. UseEffect avec un tableau vide - Il s'exécute uniquement lors du premier rendu.

3. UseEffect with variables - Il s'exécute lors du premier rendu et s'exécute lors des modifications de cette variable.

4. UseEffect avec fonction de nettoyage - Les délais d'attente, les abonnements, les écouteurs d'événements ou d'autres fonctions pour se désinscrire ou non nécessaires après utilisation peuvent être éliminés avec des fonctions de nettoyage.

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!