reactjs+cycle de vie [useEffect]

Version imprimable

14/09/2021, 11h43
bza88

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

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:

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>
  );
}

18/09/2021, 18h09
bza88

Salut,

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

merci
18/09/2021, 18h18
gwyohm

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.