EnglishCommencer

Le framework client : rendu et réactivité

Ce que le framework client fait seul, lu sur React : rendu déclaratif, état et nouveau rendu, DOM virtuel et clés, effets et dépendances, cycle de vie, magasin d'état à sens unique.

  • 27 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. Les étapes
  5. Comprendre

Quelques cartes du deck

  • Rendu déclaratif : de quoi s'agit-il ?

    Voir la réponse

    Façon d'écrire une interface en décrivant ce qu'elle doit montrer pour un état donné, sans dire comment modifier la page étape par étape.

    Au lieu de document.querySelector('p').textContent = n, on écrit <p>{n}</p> : c'est le framework qui calcule les modifications à faire sur la page.

  • Ce composant s'affiche (sans StrictMode), puis on clique une fois sur le bouton. Quelles lignes sortent dans la console à partir du clic ?

    ```javascript
    function Compteur() {
    const [n, setN] = useState(0);
    console.log("rendu", n);
    useEffect(() => {
    console.log("effet", n);
    return () => console.log("nettoyage", n);
    }, [n]);
    return <button onClick={() => setN(n + 1)}>{n}</button>;
    }
    `

    • rendu 1, nettoyage 0, effet 1
    • nettoyage 0, rendu 1, effet 1
    • rendu 1, effet 1, nettoyage 0
    • effet 1, rendu 1
    Voir la réponse

    rendu 1, nettoyage 0, effet 1

    Le rendu a lieu en premier. Une fois la page mise à jour, React exécute le nettoyage de l'effet précédent (qui a gardé n valant 0) puis le nouvel effet. Le composant a affiché rendu 0 et effet 0 au premier affichage.

  • En rendu déclaratif, l'interface est une … de l'état : pour le même état, un composant décrit toujours le même affichage.

    Voir la réponse

    En rendu déclaratif, l'interface est une fonction de l'état : pour le même état, un composant décrit toujours le même affichage.

    C'est pourquoi un composant ne doit pas modifier la page ni l'état pendant son rendu : cela appartient aux gestionnaires d'événements et aux effets.

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

    Voir la réponse

    Propriété d'une interface qui se redessine d'elle-même quand la donnée dont elle dépend change.

    Dans React, c'est l'appel de la fonction de mise à jour de l'état (setN) qui planifie un nouveau rendu ; modifier une variable ordinaire ne redessine rien.

  • Mise à jour d'un composant React après un changement d'état : quelle étape vient après « Appel de la fonction du composant (rendu) » ?

    • Comparaison avec l'arbre précédent (réconciliation)
    • Mise à jour du DOM réel
    • Nettoyage des effets dont les dépendances ont changé
    • Exécution des effets
    Voir la réponse

    Comparaison avec l'arbre précédent (réconciliation)

    Le rendu n'écrit rien dans la page : il décrit. La page n'est modifiée qu'après la comparaison. Les effets viennent en dernier, une fois l'affichage à jour, nettoyage d'abord.

Réviser ce deck