1 00:00:02,510 --> 00:00:04,590 Quindi ora siamo in grado di comunicare di nuovo. 2 00:00:05,470 --> 00:00:10,240 E stiamo effettivamente aggiornando la nostra gamma di obiettivi del corso nel componente dell'app. 3 00:00:11,040 --> 00:00:17,170 Ma quello che vedi è nonostante l'array venga aggiornato e chiaramente il nuovo obiettivo è parte dell'array, il nostro output 4 00:00:17,740 --> 00:00:19,960 qui sullo schermo non è cambiato. 5 00:00:20,260 --> 00:00:23,920 E questo ci conduce a un concetto fondamentale di stato di reazione. 6 00:00:25,170 --> 00:00:34,530 React non esegue il rendering della scarica è il codice X e quindi la vera interfaccia utente ogni volta che qualche evento viene attivato in 7 00:00:34,560 --> 00:00:36,060 qualsiasi punto dell'app. 8 00:00:36,270 --> 00:00:41,400 Quindi, solo perché faccio clic su questo pulsante qui non significa che reagisca al rendering dell'intero schermo solo per 9 00:00:41,400 --> 00:00:43,890 assicurarsi che non manchi alcuna modifica dei dati. 10 00:00:44,130 --> 00:00:46,080 Non è così che funziona la reazione. 11 00:00:46,560 --> 00:00:48,270 Invece, alla fine, devi dirlo. 12 00:00:48,330 --> 00:00:49,610 Reagisci quando dovrebbe. 13 00:00:49,650 --> 00:00:50,340 Render. 14 00:00:51,050 --> 00:00:55,150 E poi lo fai usando un concetto chiamato discorso di stato. 15 00:00:55,230 --> 00:00:55,640 Gli obiettivi sono. 16 00:00:55,760 --> 00:00:57,610 Ecco un normale array JavaScript. 17 00:00:58,230 --> 00:01:01,640 In altre parole, reagire ignora totalmente. 18 00:01:02,280 --> 00:01:06,840 Dobbiamo dire a reagire che non dovrebbe ignorarlo e morire invece. 19 00:01:06,900 --> 00:01:11,660 Ogni volta che cambiamo, l'array dovrebbe aggiornarsi. 20 00:01:11,690 --> 00:01:15,360 J è il codice X del componente in cui è stato modificato. 21 00:01:15,450 --> 00:01:17,490 Quindi, in questo caso del componente dell'app. 22 00:01:18,420 --> 00:01:22,440 Ora per fare ciò importiamo un'altra cosa dal pacchetto REAC. 23 00:01:22,470 --> 00:01:29,490 E questo è lo stato di utilizzo della funzione incorporato nella libreria di reazioni, un cosiddetto gancio di reazione. 24 00:01:29,610 --> 00:01:32,400 E impari di più sui ganci nella mia reazione alla guida completa. 25 00:01:32,430 --> 00:01:32,730 Corso. 26 00:01:32,730 --> 00:01:33,180 Ovviamente. 27 00:01:33,870 --> 00:01:38,340 Una funzione che non possiamo eseguire termina in tutti i componenti funzionali. 28 00:01:38,580 --> 00:01:42,770 E solo invece di componenti funzionali in componenti basati su classi. 29 00:01:42,810 --> 00:01:47,880 Hai anche un meccanismo di gestione statale, non focalizzato su questo corso qui, ma puoi anche farlo 30 00:01:47,880 --> 00:01:48,240 lì. 31 00:01:48,660 --> 00:01:53,700 Ma nei componenti funzionali, si utilizzano queste funzioni di hook, come vengono chiamate. 32 00:01:53,970 --> 00:01:54,960 Tutte queste funzioni. 33 00:01:55,020 --> 00:01:59,280 A partire dall'uso all'inizio per gestire lo stato. 34 00:01:59,790 --> 00:02:06,390 Quindi, per gestire i dati che, una volta modificati, dovrebbero portare all'interfaccia utente di quel componente in cui riesci a 35 00:02:06,390 --> 00:02:07,830 dichiarare per il rendering. 36 00:02:08,610 --> 00:02:09,810 Quindi qui il componente dell'app. 37 00:02:10,200 --> 00:02:14,280 Non desidero chiamare state use e use state. 38 00:02:14,790 --> 00:02:16,410 Passo questo array qui. 39 00:02:16,800 --> 00:02:18,960 Questo è il mio cosiddetto stato iniziale. 40 00:02:18,990 --> 00:02:21,690 Quindi posso liberarmi di quel concetto per ora. 41 00:02:22,260 --> 00:02:26,970 Questo dice a reagire che questo componente ha un certo stato e che questo è il mio stato iniziale. 42 00:02:27,180 --> 00:02:32,100 A proposito, puoi anche avere diversi pezzi di stato diversi e sono tutti guardati in modo indipendente. 43 00:02:32,370 --> 00:02:35,790 Ma qui ho solo uno stato principale e questa è la mia serie di obiettivi. 44 00:02:36,330 --> 00:02:40,290 E dico a reagire che ho questo stato e che questo è il mio stato iniziale. 45 00:02:41,220 --> 00:02:46,620 Ora, ovviamente, desidero accedere a tale memoria dello stato iniziale e ad alcune costanti in modo da poterlo 46 00:02:46,620 --> 00:02:50,280 utilizzare nel resto del componente, perché Core Scholes ora manca dappertutto. 47 00:02:50,940 --> 00:02:52,980 Quindi affermi che tutto ha restituito qualcosa. 48 00:02:53,430 --> 00:02:56,490 Restituisce una matrice di esattamente due elementi. 49 00:02:56,910 --> 00:03:01,110 Il primo elemento è sempre la nostra ultima istantanea di stato. 50 00:03:01,500 --> 00:03:05,760 Quindi o il nostro stato iniziale o una volta modificato, lo stato aggiornato. 51 00:03:06,450 --> 00:03:12,630 E il secondo elemento di quell'array restituito dallo stato d'uso è una funzione che ci consente di aggiornare tale 52 00:03:12,630 --> 00:03:13,080 stato. 53 00:03:13,500 --> 00:03:18,030 Sostituiscilo con un nuovo valore e comunica a reattivo che dovrebbe essere visualizzato nuovamente. 54 00:03:18,930 --> 00:03:26,010 Quindi qui userà la struttura dell'array D usando parentesi quadre sul lato sinistro del mio tempo uguale qui per 55 00:03:26,730 --> 00:03:28,620 estrarre questi due elementi. 56 00:03:28,680 --> 00:03:31,270 Ho un array inde restituito dallo stato d'uso. 57 00:03:31,380 --> 00:03:33,810 E ci sono sempre esattamente due elementi. 58 00:03:34,080 --> 00:03:37,200 Quindi non dipende da quale tipo di dati tatta di stato passi qui. 59 00:03:37,440 --> 00:03:40,140 Usa stato offre una matrice con esattamente due elementi. 60 00:03:40,470 --> 00:03:42,740 Primo elemento, il tuo stato attuale. 61 00:03:42,840 --> 00:03:45,230 Quindi nel mio caso, il mio array qui. 62 00:03:45,870 --> 00:03:48,120 Secondo elemento della funzione per aggiornare lo stato. 63 00:03:48,240 --> 00:03:50,460 Pertanto, in genere abbiamo chiamato come set. 64 00:03:51,150 --> 00:03:52,770 E poi qualsiasi nome di tua scelta Chote. 65 00:03:52,860 --> 00:03:54,330 Stabilisci gli obiettivi del corso nel mio caso. 66 00:03:54,900 --> 00:03:57,600 Quindi ora ho due costanti create con l'aiuto di U. S. 67 00:03:57,720 --> 00:04:00,600 La prima costante di stato contiene la mia istantanea di stato. 68 00:04:00,840 --> 00:04:05,880 In secondo luogo, la costante detiene effettivamente una funzione che possiamo chiamare per aggiornare quella istantanea dello stato. 69 00:04:06,510 --> 00:04:09,360 E chiameremo questa funzione qui e aggiungeremo un nuovo obiettivo. 70 00:04:09,360 --> 00:04:13,410 Il gestore può chiamare gli obiettivi del corso impostati qui e ora. 71 00:04:13,410 --> 00:04:16,740 Voglio aggiornare gli obiettivi del mio corso aggiungendo un nuovo obiettivo. 72 00:04:17,400 --> 00:04:24,210 Ora, una semplice forma di fare è semplicemente usare i miei vecchi obiettivi del corso e chiamare concat qui, non push, 73 00:04:24,210 --> 00:04:31,350 perché push modifica l'elemento esistente invece imposta gli obiettivi del corso una volta un nuovo array che sostituirà il vecchio array 74 00:04:31,350 --> 00:04:37,110 e concat aggiungere un elemento a un array, ma restituirà un nuovo array a cui è stato 75 00:04:37,140 --> 00:04:38,520 aggiunto questo elemento. 76 00:04:38,850 --> 00:04:41,870 Quindi ci dà un nuovo array, non tocca quello vecchio. 77 00:04:42,190 --> 00:04:46,080 E non abbiamo superato il nuovo array per stabilire gli obiettivi del corso e reagire. 78 00:04:46,080 --> 00:04:52,200 Utilizzerà quindi quel nuovo array sotto il cofano, sostituirà il vecchio raggio nel suo stato 79 00:04:52,200 --> 00:04:59,760 gestito internamente e renderà nuovamente questo componente una volta fatto, e quindi aggiornerà gli obiettivi del discorso costantemente con il 80 00:04:59,760 --> 00:05:00,660 nuovo array. 81 00:05:00,900 --> 00:05:06,210 Nel prossimo ciclo di rendering, il che significa che reagirà eseguirà questa funzione qui, e quindi quando 82 00:05:06,240 --> 00:05:10,470 lo farà, rifletterà che i nuovi dati in Arjay sono codice X. 83 00:05:11,430 --> 00:05:13,560 Quindi qui voglio concedere il mio nuovo obiettivo. 84 00:05:13,990 --> 00:05:15,360 E se ora siamo di sicurezza. 85 00:05:16,850 --> 00:05:25,300 E faccio clic su Aggiungi obiettivo, vedrai nuovi obiettivi aggiunti all'elenco perché reagisci ora rende nuovamente questa schermata o le 86 00:05:25,360 --> 00:05:27,610 parti che devono essere renderizzate. 87 00:05:28,120 --> 00:05:35,500 Ogni volta che aggiorniamo il nostro stato ora, il modo in cui reagisce in modo esagerato non è al centro di questo corso. 88 00:05:35,530 --> 00:05:39,850 Puoi impararlo e risorse dedicate come i documenti ufficiali o la mia guida completa. 89 00:05:40,450 --> 00:05:45,040 Per ora è sufficiente notare che reagiscono magicamente ed efficacemente. 90 00:05:45,300 --> 00:05:49,840 Viene eseguito il rendering di una pagina o di parti della pagina che richiedono il rendering? 91 00:05:50,020 --> 00:05:52,150 In base ai cambiamenti di stato che abbiamo applicato.