IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

React Discussion :

reactjs+cycle de vie [useEffect]


Sujet :

React

  1. #1
    Membre régulier
    Homme Profil pro
    Etudiant du Genie Logiciel
    Inscrit en
    juillet 2011
    Messages
    385
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Etudiant du Genie Logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2011
    Messages : 385
    Points : 73
    Points
    73
    Par défaut reactjs+cycle de vie [useEffect]
    Bonjour,

    Je sais très bien que les useEffect permettent d'effectuer une action à un moment donné du cycle de vie des composants (fonctions) et qu'ils ne sont utilisables que dans les fonctions. Le cycle de vie (componentDidMount, componentDidUpdate,etcomponentWillUnmount.) des composants Reactjs est très bien perceptible dans les composants de type class. Mon problème se situe au niveau des composants de type fonctions.comment distinguer parfaitement ces étapes de cycle de vie dans un composant de type fonction c'est à dire agir quand le composant est monté, mise a jour et démonté.je souhaiterai comprendre parfaitement les choses puisque useEffect englobe toutes ces étapes du cycle de vie.

    Merci

  2. #2
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    salut,

    useEffect prend en paramètre une fonction (et éventuellement un tableau)
    la fonction passée est exécutée après chaque render. Donc c'est l'équivalent de componentDidMount et de componentDidUpdate.
    Si cette fonction renvoie une fonction, alors celle-ci sera exécutée au moment du unMount.

    Si tu veux limiter l'execution de code à certains changements, alors tu passes en paramètre les abonnements qui t'intéressent:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
     
    import { useEffect, useState } from "react";
     
    function Demo(props) {
      const [stateVal, setStateVal] = useState('');
      useEffect(() => {
        console.log('effet on mounted');
        return () => {
          console.log('effet on unmounted');
        }
      }, []);
      useEffect(() => {
        console.log('props.val a changé');
      }, [props.val]);
      useEffect(() => {
        console.log('stateVal a changé');
      }, [stateVal]);
      useEffect(() => {
        console.log('stateVal ou props.val a changé');
      }, [stateVal, props.val]);
      return (
      <div>
        props.val<input type="text" value={props.val} onChange={e => props.onValChanged(e.target.value)}/>
        <br/>
        stateVal<input type="text" value={stateVal} onChange={ e => setStateVal(e.target.value)}/>
      </div>
      );
    }
     
    export default function App() {
     
      const [show, setShow] = useState(false);
      const [val, setVal] = useState('');
      function toggle() {
        setShow(!show)
      }
      return (
        <div className="App">
          <button onClick={toggle}>toggle</button>
          { show && (<Demo val={val} onValChanged={setVal}/>) }
        </div>
      );
    }
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

  3. #3
    Membre régulier
    Homme Profil pro
    Etudiant du Genie Logiciel
    Inscrit en
    juillet 2011
    Messages
    385
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Cameroun

    Informations professionnelles :
    Activité : Etudiant du Genie Logiciel
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juillet 2011
    Messages : 385
    Points : 73
    Points
    73
    Par défaut
    Salut,

    quelle approche conseille-t-on ? composant class ou function ?

    merci

  4. #4
    Membre éprouvé
    Avatar de gwyohm
    Homme Profil pro
    Développeur informatique
    Inscrit en
    octobre 2007
    Messages
    901
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : octobre 2007
    Messages : 901
    Points : 1 291
    Points
    1 291
    Par défaut
    Je ne pense pas qu'il y ait de réponse tranchée à ta question. Ca dépend de tes connaissances, de la taille de ton projet, des délais...

    De mon expérience avec ces frameworks (react, vue...), ce que je peux dire, c'est qu'il vaut mieux avoir plein de petits composants que 1 gros.
    Chaque composant ne doit avoir qu'une tâche.
    Sachant cela, je trouve que des composants classe sont top verbeux. Je préfère donc les fonctions.

    Utiliser l'API hooks permet également de séparer plus facilement la logique métier de la représentation à l'écran.
    on ne dit pas "ça ne marche pas" on dit "je suis incapable de faire fonctionner correctement les outils mis à ma disposition"
    Pas de question technique par MP

Discussions similaires

  1. Model de cycle de vie d'un logiciel
    Par apt dans le forum Méthodes
    Réponses: 4
    Dernier message: 29/10/2014, 23h54
  2. Réponses: 7
    Dernier message: 08/03/2007, 09h23
  3. Réponses: 6
    Dernier message: 07/03/2007, 09h32
  4. [Maven2] Cycle de Vie - Phases et Goals
    Par Palmer dans le forum Maven
    Réponses: 4
    Dernier message: 05/03/2007, 22h34
  5. [EJB Stateful] [Cycle de vie] methode remove()
    Par anitshka dans le forum Java EE
    Réponses: 3
    Dernier message: 05/12/2006, 17h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo