Quindi ora siamo in grado di comunicare di nuovo.
E stiamo effettivamente aggiornando la nostra gamma di obiettivi del corso nel componente dell'app.
Ma quello che vedi è nonostante l'array venga aggiornato e chiaramente il nuovo obiettivo è parte dell'array, il nostro output
qui sullo schermo non è cambiato.
E questo ci conduce a un concetto fondamentale di stato di reazione.
React non esegue il rendering della scarica è il codice X e quindi la vera interfaccia utente ogni volta che qualche evento viene attivato in
qualsiasi punto dell'app.
Quindi, solo perché faccio clic su questo pulsante qui non significa che reagisca al rendering dell'intero schermo solo per
assicurarsi che non manchi alcuna modifica dei dati.
Non è così che funziona la reazione.
Invece, alla fine, devi dirlo.
Reagisci quando dovrebbe.
Render.
E poi lo fai usando un concetto chiamato discorso di stato.
Gli obiettivi sono.
Ecco un normale array JavaScript.
In altre parole, reagire ignora totalmente.
Dobbiamo dire a reagire che non dovrebbe ignorarlo e morire invece.
Ogni volta che cambiamo, l'array dovrebbe aggiornarsi.
J è il codice X del componente in cui è stato modificato.
Quindi, in questo caso del componente dell'app.
Ora per fare ciò importiamo un'altra cosa dal pacchetto REAC.
E questo è lo stato di utilizzo della funzione incorporato nella libreria di reazioni, un cosiddetto gancio di reazione.
E impari di più sui ganci nella mia reazione alla guida completa.
Corso.
Ovviamente.
Una funzione che non possiamo eseguire termina in tutti i componenti funzionali.
E solo invece di componenti funzionali in componenti basati su classi.
Hai anche un meccanismo di gestione statale, non focalizzato su questo corso qui, ma puoi anche farlo
lì.
Ma nei componenti funzionali, si utilizzano queste funzioni di hook, come vengono chiamate.
Tutte queste funzioni.
A partire dall'uso all'inizio per gestire lo stato.
Quindi, per gestire i dati che, una volta modificati, dovrebbero portare all'interfaccia utente di quel componente in cui riesci a
dichiarare per il rendering.
Quindi qui il componente dell'app.
Non desidero chiamare state use e use state.
Passo questo array qui.
Questo è il mio cosiddetto stato iniziale.
Quindi posso liberarmi di quel concetto per ora.
Questo dice a reagire che questo componente ha un certo stato e che questo è il mio stato iniziale.
A proposito, puoi anche avere diversi pezzi di stato diversi e sono tutti guardati in modo indipendente.
Ma qui ho solo uno stato principale e questa è la mia serie di obiettivi.
E dico a reagire che ho questo stato e che questo è il mio stato iniziale.
Ora, ovviamente, desidero accedere a tale memoria dello stato iniziale e ad alcune costanti in modo da poterlo
utilizzare nel resto del componente, perché Core Scholes ora manca dappertutto.
Quindi affermi che tutto ha restituito qualcosa.
Restituisce una matrice di esattamente due elementi.
Il primo elemento è sempre la nostra ultima istantanea di stato.
Quindi o il nostro stato iniziale o una volta modificato, lo stato aggiornato.
E il secondo elemento di quell'array restituito dallo stato d'uso è una funzione che ci consente di aggiornare tale
stato.
Sostituiscilo con un nuovo valore e comunica a reattivo che dovrebbe essere visualizzato nuovamente.
Quindi qui userà la struttura dell'array D usando parentesi quadre sul lato sinistro del mio tempo uguale qui per
estrarre questi due elementi.
Ho un array inde restituito dallo stato d'uso.
E ci sono sempre esattamente due elementi.
Quindi non dipende da quale tipo di dati tatta di stato passi qui.
Usa stato offre una matrice con esattamente due elementi.
Primo elemento, il tuo stato attuale.
Quindi nel mio caso, il mio array qui.
Secondo elemento della funzione per aggiornare lo stato.
Pertanto, in genere abbiamo chiamato come set.
E poi qualsiasi nome di tua scelta Chote.
Stabilisci gli obiettivi del corso nel mio caso.
Quindi ora ho due costanti create con l'aiuto di U. S.
La prima costante di stato contiene la mia istantanea di stato.
In secondo luogo, la costante detiene effettivamente una funzione che possiamo chiamare per aggiornare quella istantanea dello stato.
E chiameremo questa funzione qui e aggiungeremo un nuovo obiettivo.
Il gestore può chiamare gli obiettivi del corso impostati qui e ora.
Voglio aggiornare gli obiettivi del mio corso aggiungendo un nuovo obiettivo.
Ora, una semplice forma di fare è semplicemente usare i miei vecchi obiettivi del corso e chiamare concat qui, non push,
perché push modifica l'elemento esistente invece imposta gli obiettivi del corso una volta un nuovo array che sostituirà il vecchio array
e concat aggiungere un elemento a un array, ma restituirà un nuovo array a cui è stato
aggiunto questo elemento.
Quindi ci dà un nuovo array, non tocca quello vecchio.
E non abbiamo superato il nuovo array per stabilire gli obiettivi del corso e reagire.
Utilizzerà quindi quel nuovo array sotto il cofano, sostituirà il vecchio raggio nel suo stato
gestito internamente e renderà nuovamente questo componente una volta fatto, e quindi aggiornerà gli obiettivi del discorso costantemente con il
nuovo array.
Nel prossimo ciclo di rendering, il che significa che reagirà eseguirà questa funzione qui, e quindi quando
lo farà, rifletterà che i nuovi dati in Arjay sono codice X.
Quindi qui voglio concedere il mio nuovo obiettivo.
E se ora siamo di sicurezza.
E faccio clic su Aggiungi obiettivo, vedrai nuovi obiettivi aggiunti all'elenco perché reagisci ora rende nuovamente questa schermata o le
parti che devono essere renderizzate.
Ogni volta che aggiorniamo il nostro stato ora, il modo in cui reagisce in modo esagerato non è al centro di questo corso.
Puoi impararlo e risorse dedicate come i documenti ufficiali o la mia guida completa.
Per ora è sufficiente notare che reagiscono magicamente ed efficacemente.
Viene eseguito il rendering di una pagina o di parti della pagina che richiedono il rendering?
In base ai cambiamenti di stato che abbiamo applicato.