1
00:00:02,510 --> 00:00:04,590
Alors maintenant, nous pouvons communiquer en retour.

2
00:00:05,470 --> 00:00:10,240
Et nous mettons actuellement à jour notre tableau d'objectifs de cours dans le composant d'application.

3
00:00:11,040 --> 00:00:17,170
Mais ce que vous voyez, c'est que le tableau est mis à jour et clairement que le nouvel objectif fait partie du tableau,

4
00:00:17,740 --> 00:00:19,960
notre sortie ici à l'écran n'a pas changé.

5
00:00:20,260 --> 00:00:23,920
Et cela nous amène à un concept central d'état de réaction.

6
00:00:25,170 --> 00:00:34,530
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é

7
00:00:34,560 --> 00:00:36,060
n'importe où dans l'application.

8
00:00:36,270 --> 00:00:41,400
Donc, juste parce que je clique sur ce bouton ici, cela ne signifie pas que réagir restituera tout l'écran juste

9
00:00:41,400 --> 00:00:43,890
pour s'assurer qu'il ne manque aucun changement de données.

10
00:00:44,130 --> 00:00:46,080
Ce n'est pas ainsi que fonctionne React.

11
00:00:46,560 --> 00:00:48,270
Au lieu de cela, à la fin, vous devez le dire.

12
00:00:48,330 --> 00:00:49,610
Réagissez quand il le faut.

13
00:00:49,650 --> 00:00:50,340
Rendu.

14
00:00:51,050 --> 00:00:55,150
Et puis vous le faites en utilisant un concept appelé discours d'État.

15
00:00:55,230 --> 00:00:55,640
Les objectifs sont.

16
00:00:55,760 --> 00:00:57,610
Voici un tableau JavaScript standard.

17
00:00:58,230 --> 00:01:01,640
En d'autres termes, réagir l'ignore totalement.

18
00:01:02,280 --> 00:01:06,840
Nous devons dire à réagir qu'il ne devrait pas l'ignorer et mort à la place.

19
00:01:06,900 --> 00:01:11,660
Chaque fois que nous modifions un tableau, il devrait mettre à jour d ui.

20
00:01:11,690 --> 00:01:15,360
Le J est le code X du composant dans lequel nous l'avons modifié.

21
00:01:15,450 --> 00:01:17,490
Donc, dans ce cas, le composant d'application.

22
00:01:18,420 --> 00:01:22,440
Maintenant, pour ce faire, nous importons une autre chose du package REAC.

23
00:01:22,470 --> 00:01:29,490
Et c'est l'état d'utilisation de la fonction intégré à la bibliothèque React, un soi-disant crochet React.

24
00:01:29,610 --> 00:01:32,400
Et vous en apprendrez plus sur les crochets dans mon guide de réaction complet.

25
00:01:32,430 --> 00:01:32,730
Cours.

26
00:01:32,730 --> 00:01:33,180
Bien sûr.

27
00:01:33,870 --> 00:01:38,340
Une fonction que nous ne pouvons pas exécuter se termine à tous les composants fonctionnels.

28
00:01:38,580 --> 00:01:42,770
Et uniquement à la place des composants fonctionnels dans les composants basés sur les classes.

29
00:01:42,810 --> 00:01:47,880
Vous avez également un mécanisme de gestion de l'État, pas le sujet de ce cours ici, mais vous pouvez également le faire

30
00:01:47,880 --> 00:01:48,240
là-bas.

31
00:01:48,660 --> 00:01:53,700
Mais dans les composants fonctionnels, vous utilisez ces fonctions de hook, comme on les appelle.

32
00:01:53,970 --> 00:01:54,960
Toutes ces fonctions.

33
00:01:55,020 --> 00:01:59,280
En commençant par utiliser au début pour gérer l'état.

34
00:01:59,790 --> 00:02:06,390
Donc, pour gérer les données qui, une fois modifiées, devraient conduire à l'interface utilisateur de ce composant dans lequel vous parvenez

35
00:02:06,390 --> 00:02:07,830
à déclarer à restituer.

36
00:02:08,610 --> 00:02:09,810
Voici donc le composant d'application.

37
00:02:10,200 --> 00:02:14,280
Je ne veux pas appeler l'état d'utilisation et utiliser l'état.

38
00:02:14,790 --> 00:02:16,410
Je passe ce tableau ici.

39
00:02:16,800 --> 00:02:18,960
Ceci est mon soi-disant état initial.

40
00:02:18,990 --> 00:02:21,690
Ensuite, je peux me débarrasser de ce concept pour l'instant.

41
00:02:22,260 --> 00:02:26,970
Cela indique que ce composant a un état et que c'est mon état initial.

42
00:02:27,180 --> 00:02:32,100
Soit dit en passant, vous pouvez également avoir plusieurs éléments d'état différents et ils sont tous surveillés indépendamment.

43
00:02:32,370 --> 00:02:35,790
Mais ici, je n'ai qu'un seul état principal et c'est ma gamme d'objectifs.

44
00:02:36,330 --> 00:02:40,290
Et je dis réagir que j'ai cet état et que c'est mon état initial.

45
00:02:41,220 --> 00:02:46,620
Maintenant, bien sûr, je veux avoir accès à ce stockage d'état initial et à une certaine constante afin de pouvoir

46
00:02:46,620 --> 00:02:50,280
l'utiliser dans le reste du composant, car Core Scholes est maintenant manquant partout.

47
00:02:50,940 --> 00:02:52,980
Vous dites donc que tous ont retourné quelque chose.

48
00:02:53,430 --> 00:02:56,490
Il renvoie un tableau d'exactement deux éléments.

49
00:02:56,910 --> 00:03:01,110
Le premier élément est toujours notre dernier instantané d'état.

50
00:03:01,500 --> 00:03:05,760
Donc, soit notre état initial ou une fois que nous l'avons changé, l'état mis à jour.

51
00:03:06,450 --> 00:03:12,630
Et le deuxième élément de ce tableau retourné par état d'utilisation est une fonction qui nous permet de mettre à jour cet

52
00:03:12,630 --> 00:03:13,080
état.

53
00:03:13,500 --> 00:03:18,030
Remplacez-le par une nouvelle valeur et dites à react qu'il doit être rendu.

54
00:03:18,930 --> 00:03:26,010
Donc, ici, il utilisera la structuration du tableau D en utilisant des crochets sur le côté gauche de mon temps égal ici

55
00:03:26,730 --> 00:03:28,620
pour extraire ces deux éléments.

56
00:03:28,680 --> 00:03:31,270
J'ai un tableau inde retourné par état d'utilisation.

57
00:03:31,380 --> 00:03:33,810
Et il y a toujours exactement deux éléments.

58
00:03:34,080 --> 00:03:37,200
Cela ne dépend donc pas du type de données d'état que vous transmettez ici.

59
00:03:37,440 --> 00:03:40,140
Utiliser l'état vous donne un tableau avec exactement deux éléments.

60
00:03:40,470 --> 00:03:42,740
Premier élément, votre état actuel.

61
00:03:42,840 --> 00:03:45,230
Donc, dans mon cas, mon tableau ici.

62
00:03:45,870 --> 00:03:48,120
Deuxième élément de fonction pour mettre à jour l'état.

63
00:03:48,240 --> 00:03:50,460
Par conséquent, nous avons généralement nommé comme ensemble.

64
00:03:51,150 --> 00:03:52,770
Et puis n'importe quel nom de votre choix Chote.

65
00:03:52,860 --> 00:03:54,330
Fixez des objectifs de cours dans mon cas.

66
00:03:54,900 --> 00:03:57,600
Alors maintenant, j'ai deux constantes créées avec l'aide de U. S.

67
00:03:57,720 --> 00:04:00,600
La première constante d'état contient mon instantané d'état.

68
00:04:00,840 --> 00:04:05,880
Deuxièmement, constant contient en fait une fonction que nous pouvons appeler pour mettre à jour cet instantané d'état.

69
00:04:06,510 --> 00:04:09,360
Et nous appellerons cette fonction ici et ajouterons un nouvel objectif.

70
00:04:09,360 --> 00:04:13,410
Le gestionnaire peut appeler des objectifs de cours définis ici et maintenant.

71
00:04:13,410 --> 00:04:16,740
Je souhaite mettre à jour mes objectifs de cours en ajoutant un nouvel objectif.

72
00:04:17,400 --> 00:04:24,210
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,

73
00:04:24,210 --> 00:04:31,350
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

74
00:04:31,350 --> 00:04:37,110
et concat sera également ajouter un élément à un tableau, mais il renverra un nouveau tableau auquel cet

75
00:04:37,140 --> 00:04:38,520
élément a été ajouté.

76
00:04:38,850 --> 00:04:41,870
Cela nous donne donc un tout nouveau tableau, ne touche pas l'ancien.

77
00:04:42,190 --> 00:04:46,080
Et nous n'avons pas dépassé le tout nouveau tableau pour fixer des objectifs de cours et réagir.

78
00:04:46,080 --> 00:04:52,200
Va ensuite utiliser ce tout nouveau tableau sous le capot, remplacer le rayon plus ancien dans son état géré

79
00:04:52,200 --> 00:04:59,760
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

80
00:04:59,760 --> 00:05:00,660
nouveau tableau.

81
00:05:00,900 --> 00:05:06,210
Dans le prochain cycle de rendu, ce qui signifie alors que react exécutera cette fonction ici, et donc quand

82
00:05:06,240 --> 00:05:10,470
il le fera, cela reflétera que les nouvelles données dans Arjay sont du code X.

83
00:05:11,430 --> 00:05:13,560
Alors là, je veux concatre mon nouvel objectif.

84
00:05:13,990 --> 00:05:15,360
Et si nous sommes maintenant en sécurité.

85
00:05:16,850 --> 00:05:25,300
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

86
00:05:25,360 --> 00:05:27,610
les parties qui doivent être rendues.

87
00:05:28,120 --> 00:05:35,500
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.

88
00:05:35,530 --> 00:05:39,850
Vous pouvez l'apprendre et des ressources dédiées comme les documents officiels ou mon guide complet.

89
00:05:40,450 --> 00:05:45,040
Pour l'instant il suffit de noter que réagissent magiquement et efficacement.

90
00:05:45,300 --> 00:05:49,840
Est-ce que le rendu d'une page ou de parties de la page qui nécessitent un nouveau rendu?

91
00:05:50,020 --> 00:05:52,150
Sur la base des changements d'état que nous avons appliqués.