1 00:00:02,510 --> 00:00:04,590 Jetzt können wir also wieder kommunizieren. 2 00:00:05,470 --> 00:00:10,240 Und wir aktualisieren tatsächlich unser Kursziel-Array in der App-Komponente. 3 00:00:11,040 --> 00:00:17,170 Sie sehen jedoch, dass sich die Ausgabe hier auf dem Bildschirm nicht geändert hat, obwohl das Array aktualisiert wurde und das 4 00:00:17,740 --> 00:00:19,960 neue Ziel eindeutig Teil des Arrays ist. 5 00:00:20,260 --> 00:00:23,920 Und das führt uns zu einem Kernkonzept des Reaktionszustands. 6 00:00:25,170 --> 00:00:34,530 React rendert die Entladung nicht erneut, ist X-Code und daher die reale Benutzeroberfläche immer dann, wenn ein Ereignis irgendwo in der 7 00:00:34,560 --> 00:00:36,060 App ausgelöst wird. 8 00:00:36,270 --> 00:00:41,400 Nur weil ich hier auf diese Schaltfläche klicke, bedeutet dies nicht, dass durch Reagieren der gesamte Bildschirm neu gerendert 9 00:00:41,400 --> 00:00:43,890 wird, nur um sicherzustellen, dass keine Datenänderung übersehen wird. 10 00:00:44,130 --> 00:00:46,080 So funktioniert Reagieren nicht. 11 00:00:46,560 --> 00:00:48,270 Stattdessen muss man am Ende sagen. 12 00:00:48,330 --> 00:00:49,610 Reagiere wann es sollte. 13 00:00:49,650 --> 00:00:50,340 Erneut rendern. 14 00:00:51,050 --> 00:00:55,150 Und dann tun Sie dies, indem Sie ein Konzept verwenden, das als Staatsdiskurs bezeichnet wird. 15 00:00:55,230 --> 00:00:55,640 Ziele sind. 16 00:00:55,760 --> 00:00:57,610 Hier ist ein reguläres JavaScript-Array. 17 00:00:58,230 --> 00:01:01,640 Mit anderen Worten, reagieren Sie völlig ignoriert es. 18 00:01:02,280 --> 00:01:06,840 Wir müssen sagen, dass es nicht ignorieren sollte und stattdessen tot ist. 19 00:01:06,900 --> 00:01:11,660 Wann immer wir das Array ändern, sollte es die Benutzeroberfläche aktualisieren. 20 00:01:11,690 --> 00:01:15,360 Der J ist X-Code von der Komponente, in der wir ihn geändert haben. 21 00:01:15,450 --> 00:01:17,490 Also in diesem Fall der App-Komponente. 22 00:01:18,420 --> 00:01:22,440 Dazu importieren wir eine weitere Sache aus dem REAC-Paket. 23 00:01:22,470 --> 00:01:29,490 Und das ist der in die Reaktionsbibliothek integrierte Funktionszustand, ein sogenannter Reaktionshaken. 24 00:01:29,610 --> 00:01:32,400 Und Sie erfahren mehr über Haken in meiner Reaktion auf die vollständige Anleitung. 25 00:01:32,430 --> 00:01:32,730 Kurs. 26 00:01:32,730 --> 00:01:33,180 Na sicher. 27 00:01:33,870 --> 00:01:38,340 Eine Funktion, die wir nicht ausführen können, endet an allen Funktionskomponenten. 28 00:01:38,580 --> 00:01:42,770 Und nur anstelle von Funktionskomponenten in klassenbasierten Komponenten. 29 00:01:42,810 --> 00:01:47,880 Sie haben auch einen Statusverwaltungsmechanismus, der hier nicht im Mittelpunkt dieses Kurses steht, aber Sie können ihn auch dort 30 00:01:47,880 --> 00:01:48,240 durchführen. 31 00:01:48,660 --> 00:01:53,700 In Funktionskomponenten verwenden Sie diese Hook-Funktionen, wie sie genannt werden. 32 00:01:53,970 --> 00:01:54,960 All diese Funktionen. 33 00:01:55,020 --> 00:01:59,280 Beginnen Sie mit der Verwendung am Anfang, um den Status zu verwalten. 34 00:01:59,790 --> 00:02:06,390 Um also Daten zu verwalten, die bei Änderungen zur Benutzeroberfläche der Komponente führen sollten, in der Sie angeben, dass sie 35 00:02:06,390 --> 00:02:07,830 erneut gerendert werden sollen. 36 00:02:08,610 --> 00:02:09,810 Also hier die App-Komponente. 37 00:02:10,200 --> 00:02:14,280 Ich möchte nicht use state und use state aufrufen. 38 00:02:14,790 --> 00:02:16,410 Ich übergebe dieses Array hier. 39 00:02:16,800 --> 00:02:18,960 Dies ist mein sogenannter Ausgangszustand. 40 00:02:18,990 --> 00:02:21,690 Dann kann ich dieses Konzept vorerst loswerden. 41 00:02:22,260 --> 00:02:26,970 Dies sagt reagieren, dass diese Komponente einen Zustand hat und dass dies mein Ausgangszustand ist. 42 00:02:27,180 --> 00:02:32,100 Übrigens können Sie auch mehrere verschiedene Statusstücke haben, die alle unabhängig voneinander betrachtet werden. 43 00:02:32,370 --> 00:02:35,790 Aber hier habe ich nur einen Hauptzustand und das ist meine Reihe von Zielen. 44 00:02:36,330 --> 00:02:40,290 Und ich sage reagieren, dass ich diesen Zustand habe und dass dies mein Ausgangszustand ist. 45 00:02:41,220 --> 00:02:46,620 Jetzt möchte ich natürlich Zugriff auf diesen Anfangszustandsspeicher und eine Konstante erhalten, damit ich ihn im Rest 46 00:02:46,620 --> 00:02:50,280 der Komponente verwenden kann, da Core Scholes jetzt überall fehlt. 47 00:02:50,940 --> 00:02:52,980 Sie geben also an, dass alle etwas zurückgegeben haben. 48 00:02:53,430 --> 00:02:56,490 Es gibt ein Array mit genau zwei Elementen zurück. 49 00:02:56,910 --> 00:03:01,110 Das erste Element ist immer unser aktueller Status-Snapshot. 50 00:03:01,500 --> 00:03:05,760 Also entweder unser Ausgangszustand oder sobald wir ihn geändert haben, der aktualisierte Zustand. 51 00:03:06,450 --> 00:03:12,630 Und das zweite Element dieses Arrays, das vom Verwendungsstatus zurückgegeben wird, ist eine Funktion, mit der wir diesen Status aktualisieren 52 00:03:12,630 --> 00:03:13,080 können. 53 00:03:13,500 --> 00:03:18,030 Ersetzen Sie es durch einen neuen Wert und teilen Sie "Reagieren" mit, dass es erneut gerendert werden soll. 54 00:03:18,930 --> 00:03:26,010 Hier wird also die Strukturierung von Array D verwendet, indem eckige Klammern auf der linken Seite meiner gleichen Zeit verwendet werden, um 55 00:03:26,730 --> 00:03:28,620 diese beiden Elemente zu extrahieren. 56 00:03:28,680 --> 00:03:31,270 Ich habe ein Inde-Array nach Verwendungsstatus zurückgegeben. 57 00:03:31,380 --> 00:03:33,810 Und es gibt immer genau zwei Elemente. 58 00:03:34,080 --> 00:03:37,200 Es hängt also nicht davon ab, welche Art von Status-Tatta-Daten Sie hier übergeben. 59 00:03:37,440 --> 00:03:40,140 Der Verwendungsstatus gibt Ihnen ein Array mit genau zwei Elementen. 60 00:03:40,470 --> 00:03:42,740 Erstes Element, Ihr aktueller Zustand. 61 00:03:42,840 --> 00:03:45,230 Also in meinem Fall mein Array hier. 62 00:03:45,870 --> 00:03:48,120 Zweites Funktionselement zum Aktualisieren des Status. 63 00:03:48,240 --> 00:03:50,460 Daher haben wir normalerweise als set bezeichnet. 64 00:03:51,150 --> 00:03:52,770 Und dann einen beliebigen Namen Ihrer Wahl. 65 00:03:52,860 --> 00:03:54,330 Setzen Sie sich in meinem Fall Kursziele. 66 00:03:54,900 --> 00:03:57,600 Jetzt habe ich zwei Konstanten, die mit Hilfe von U erstellt wurden. S. 67 00:03:57,720 --> 00:04:00,600 Die erste Konstante des Status enthält meinen Status-Snapshot. 68 00:04:00,840 --> 00:04:05,880 Zweitens enthält die Konstante tatsächlich eine Funktion, die wir aufrufen können, um diesen Status-Snapshot zu aktualisieren. 69 00:04:06,510 --> 00:04:09,360 Und wir werden diese Funktion hier aufrufen und ein neues Ziel hinzufügen. 70 00:04:09,360 --> 00:04:13,410 Der Handler kann hier und jetzt festgelegte Kursziele nennen. 71 00:04:13,410 --> 00:04:16,740 Ich möchte meine Kursziele aktualisieren, indem ich ein neues Ziel hinzufüge. 72 00:04:17,400 --> 00:04:24,210 Eine einfache Form, dies zu tun, besteht darin, einfach meine alten Kursziele zu verwenden und hier concat aufzurufen, nicht push, 73 00:04:24,210 --> 00:04:31,350 da push das vorhandene Element ändert und stattdessen Kursziele festlegt, sobald ein brandneues Array das alte Array und concat ersetzt Fügen 74 00:04:31,350 --> 00:04:37,110 Sie einem Array ein Element hinzu, es wird jedoch ein neues Array zurückgegeben, zu dem dieses 75 00:04:37,140 --> 00:04:38,520 Element hinzugefügt wurde. 76 00:04:38,850 --> 00:04:41,870 Es gibt uns also ein brandneues Array, das das alte nicht berührt. 77 00:04:42,190 --> 00:04:46,080 Und wir haben das brandneue Array nicht bestanden, um Kursziele zu setzen und zu reagieren. 78 00:04:46,080 --> 00:04:52,200 Verwendet dann dieses brandneue Array unter der Haube, ersetzt den älteren Strahl in seinem intern 79 00:04:52,200 --> 00:04:59,760 verwalteten Zustand und rendert diese Komponente erneut, sobald dies geschehen ist, und aktualisiert daher die Diskursziele konstant mit dem 80 00:04:59,760 --> 00:05:00,660 neuen Array. 81 00:05:00,900 --> 00:05:06,210 Im nächsten Renderzyklus, der dann bedeutet, dass React diese Funktion hier ausführt, wird in 82 00:05:06,240 --> 00:05:10,470 diesem Fall angezeigt, dass neue Daten in Arjay X-Code sind. 83 00:05:11,430 --> 00:05:13,560 Hier möchte ich mein neues Ziel erläutern. 84 00:05:13,990 --> 00:05:15,360 Und wenn wir jetzt Sicherheit haben. 85 00:05:16,850 --> 00:05:25,300 Und ich klicke auf Ziel hinzufügen. Sie sehen, dass der Liste neue Ziele hinzugefügt werden, da React Now diesen Bildschirm oder die Teile, die 86 00:05:25,360 --> 00:05:27,610 neu gerendert werden müssen, erneut rendert. 87 00:05:28,120 --> 00:05:35,500 Wann immer wir unseren Status jetzt aktualisieren, steht die genaue Reaktion auf das Rendern usw. nicht im Mittelpunkt dieses Kurses. 88 00:05:35,530 --> 00:05:39,850 Sie können es lernen und spezielle Ressourcen wie die offiziellen Dokumente oder meinen vollständigen Leitfaden. 89 00:05:40,450 --> 00:05:45,040 Im Moment genügt es zu beachten, dass man magisch und effizient reagiert. 90 00:05:45,300 --> 00:05:49,840 Wird eine Seite oder Teile der Seite neu gerendert, die neu gerendert werden müssen? 91 00:05:50,020 --> 00:05:52,150 Basierend auf den Statusänderungen, die wir angewendet haben.