Alors maintenant, nous pouvons communiquer en retour.
Et nous mettons actuellement à jour notre tableau d'objectifs de cours dans le composant d'application.
Mais ce que vous voyez, c'est que le tableau est mis à jour et clairement que le nouvel objectif fait partie du tableau,
notre sortie ici à l'écran n'a pas changé.
Et cela nous amène à un concept central d'état de réaction.
React ne restitue pas la décharge est le code X et donc la vraie interface utilisateur tout le temps chaque fois qu'un événement est déclenché
n'importe où dans l'application.
Donc, juste parce que je clique sur ce bouton ici, cela ne signifie pas que réagir restituera tout l'écran juste
pour s'assurer qu'il ne manque aucun changement de données.
Ce n'est pas ainsi que fonctionne React.
Au lieu de cela, à la fin, vous devez le dire.
Réagissez quand il le faut.
Rendu.
Et puis vous le faites en utilisant un concept appelé discours d'État.
Les objectifs sont.
Voici un tableau JavaScript standard.
En d'autres termes, réagir l'ignore totalement.
Nous devons dire à réagir qu'il ne devrait pas l'ignorer et mort à la place.
Chaque fois que nous modifions un tableau, il devrait mettre à jour d ui.
Le J est le code X du composant dans lequel nous l'avons modifié.
Donc, dans ce cas, le composant d'application.
Maintenant, pour ce faire, nous importons une autre chose du package REAC.
Et c'est l'état d'utilisation de la fonction intégré à la bibliothèque React, un soi-disant crochet React.
Et vous en apprendrez plus sur les crochets dans mon guide de réaction complet.
Cours.
Bien sûr.
Une fonction que nous ne pouvons pas exécuter se termine à tous les composants fonctionnels.
Et uniquement à la place des composants fonctionnels dans les composants basés sur les classes.
Vous avez également un mécanisme de gestion de l'État, pas le sujet de ce cours ici, mais vous pouvez également le faire
là-bas.
Mais dans les composants fonctionnels, vous utilisez ces fonctions de hook, comme on les appelle.
Toutes ces fonctions.
En commençant par utiliser au début pour gérer l'état.
Donc, pour gérer les données qui, une fois modifiées, devraient conduire à l'interface utilisateur de ce composant dans lequel vous parvenez
à déclarer à restituer.
Voici donc le composant d'application.
Je ne veux pas appeler l'état d'utilisation et utiliser l'état.
Je passe ce tableau ici.
Ceci est mon soi-disant état initial.
Ensuite, je peux me débarrasser de ce concept pour l'instant.
Cela indique que ce composant a un état et que c'est mon état initial.
Soit dit en passant, vous pouvez également avoir plusieurs éléments d'état différents et ils sont tous surveillés indépendamment.
Mais ici, je n'ai qu'un seul état principal et c'est ma gamme d'objectifs.
Et je dis réagir que j'ai cet état et que c'est mon état initial.
Maintenant, bien sûr, je veux avoir accès à ce stockage d'état initial et à une certaine constante afin de pouvoir
l'utiliser dans le reste du composant, car Core Scholes est maintenant manquant partout.
Vous dites donc que tous ont retourné quelque chose.
Il renvoie un tableau d'exactement deux éléments.
Le premier élément est toujours notre dernier instantané d'état.
Donc, soit notre état initial ou une fois que nous l'avons changé, l'état mis à jour.
Et le deuxième élément de ce tableau retourné par état d'utilisation est une fonction qui nous permet de mettre à jour cet
état.
Remplacez-le par une nouvelle valeur et dites à react qu'il doit être rendu.
Donc, ici, il utilisera la structuration du tableau D en utilisant des crochets sur le côté gauche de mon temps égal ici
pour extraire ces deux éléments.
J'ai un tableau inde retourné par état d'utilisation.
Et il y a toujours exactement deux éléments.
Cela ne dépend donc pas du type de données d'état que vous transmettez ici.
Utiliser l'état vous donne un tableau avec exactement deux éléments.
Premier élément, votre état actuel.
Donc, dans mon cas, mon tableau ici.
Deuxième élément de fonction pour mettre à jour l'état.
Par conséquent, nous avons généralement nommé comme ensemble.
Et puis n'importe quel nom de votre choix Chote.
Fixez des objectifs de cours dans mon cas.
Alors maintenant, j'ai deux constantes créées avec l'aide de U. S.
La première constante d'état contient mon instantané d'état.
Deuxièmement, constant contient en fait une fonction que nous pouvons appeler pour mettre à jour cet instantané d'état.
Et nous appellerons cette fonction ici et ajouterons un nouvel objectif.
Le gestionnaire peut appeler des objectifs de cours définis ici et maintenant.
Je souhaite mettre à jour mes objectifs de cours en ajoutant un nouvel objectif.
Maintenant, une façon simple de le faire est d'utiliser simplement mes anciens objectifs de cours et d'appeler concat ici, pas de pousser,
car push modifie l'élément existant au lieu de définir des objectifs de cours une fois qu'un tout nouveau tableau qui remplacera l'ancien tableau
et concat sera également ajouter un élément à un tableau, mais il renverra un nouveau tableau auquel cet
élément a été ajouté.
Cela nous donne donc un tout nouveau tableau, ne touche pas l'ancien.
Et nous n'avons pas dépassé le tout nouveau tableau pour fixer des objectifs de cours et réagir.
Va ensuite utiliser ce tout nouveau tableau sous le capot, remplacer le rayon plus ancien dans son état géré
en interne et il restituera ce composant une fois qu'il l'a fait, et mettra donc à jour les objectifs de discours constants avec le
nouveau tableau.
Dans le prochain cycle de rendu, ce qui signifie alors que react exécutera cette fonction ici, et donc quand
il le fera, cela reflétera que les nouvelles données dans Arjay sont du code X.
Alors là, je veux concatre mon nouvel objectif.
Et si nous sommes maintenant en sécurité.
Et je clique sur Ajouter un objectif, vous voyez que de nouveaux objectifs sont ajoutés à la liste parce que réagir rend maintenant cet écran ou
les parties qui doivent être rendues.
Chaque fois que nous mettons à jour notre état maintenant, la façon dont les réactions exactes sont rendues n'est pas l'objet de ce cours.
Vous pouvez l'apprendre et des ressources dédiées comme les documents officiels ou mon guide complet.
Pour l'instant il suffit de noter que réagissent magiquement et efficacement.
Est-ce que le rendu d'une page ou de parties de la page qui nécessitent un nouveau rendu?
Sur la base des changements d'état que nous avons appliqués.