EnglishCommencer

Framework front : l'état

L'état local d'un composant et le rendu qui en découle, l'état dérivé, la remontée de l'état vers l'ancêtre commun, le magasin partagé et la mise à jour sans modification en place.

  • 25 cartes
  • 5 thèmes
  • Gratuit
Réviser ce deck

Le programme, thème par thème

Le poids de chaque thème suit celui que lui donne l'examen.

  1. Notions
  2. Questions
  3. Ranger et relier
  4. Mises en situation
  5. Comprendre

Quelques cartes du deck

  • État d'un composant : de quoi s'agit-il ?

    Voir la réponse

    Donnée qu'un composant garde d'un rendu à l'autre et dont le changement déclenche un nouvel affichage.

    Une variable ordinaire d'une fonction est recréée à chaque rendu ; l'état, lui, est conservé par le framework.

  • Le compteur vaut 0 et on clique une fois. Que vaut n au rendu suivant ?

    ```jsx
    const [n, setN] = useState(0);

    function clic() {
    setN(n + 1);
    setN(n + 1);
    }
    `

    • 1
    • 2
    • 0
    • 3
    Voir la réponse

    1

    Pendant ce rendu, n vaut 0 dans toute la fonction : les deux appels demandent « mets 1 ». Pour enchaîner, il faut donner une fonction qui part de la dernière valeur : setN((v) => v + 1) deux fois donne 2.

  • Dans React, useState(0) renvoie une paire : la valeur de l'état et une …, dont l'appel remplace la valeur et demande un ….

    Voir la réponse

    Dans React, useState(0) renvoie une paire : la valeur de l'état et une fonction de mise à jour, dont l'appel remplace la valeur et demande un nouveau rendu.

    Écrire n = 5 directement ne change rien à l'écran : seul l'appel de la fonction de mise à jour prévient le framework.

  • Réactivité : de quoi s'agit-il ?

    Voir la réponse

    Propriété d'une interface qui se redessine d'elle-même quand les données dont elle dépend changent.

    On ne modifie pas l'écran : on modifie l'état, et le framework recalcule les composants concernés.

  • Après un clic sur « Ajouter », l'écran ne bouge pas alors que liste.push(x) s'exécute bien. Quelle réparation convient ?

    • setListe([...liste, x])
    • liste.push(x); setListe(liste)
    • liste.push(x) dans un useEffect sans dépendances
    • liste = [...liste, x]
    Voir la réponse

    setListe([...liste, x])

    push modifie le tableau en place, et setListe(liste) redonne la même référence : le framework n'y voit aucun changement. Réaffecter liste (une constante) ne prévient personne. Il faut un nouveau tableau passé à la fonction de mise à jour.

Réviser ce deck