Mentre mi ricordo di React Collolocation
Quando costruisco componenti React , la cosa che mi fa confondere è il re-rendering indesiderato. Alcuni componenti vengono ri-renderizzati senza le mie intenzioni.
Eppure, ho letto un trucco per ridurre i problemi di re-rendering indesiderati, non i migliori consigli ma piuttosto utili, si chiama colocation . Cos'è quello? da quello che ho capito, il concetto principale è usare lo stato il più vicino possibile al componente che lo utilizza.
Gettarsi
Immergiamoci, creo 3 componenti super semplici,
- App.js (come genitore),
- FirstChild.js (come primo figlio),
- e SecondComponent.js (come secondo figlio).
L'immagine sopra mostra che tutti i componenti sono renderizzati anche il <SecondChild /> che non usa lo stato.
Quello che vogliamo non è rendere il componente che non usa lo stato . Usiamo solo lo stato in <FirstChild /> solo. Come possiamo farlo? Spostando lo stato il più vicino possibile al componente lo utilizza. quindi miglioriamo il codice sopra spostando lo stato all'interno
<App />
<PrimoFiglio /> :
e mantieni il <SecondComponent/> invariato.
Risultato
di nuovo, al primo rendering, è previsto il rendering di tutti i componenti.
ora scriviamo di nuovo l'input
vedi le differenze? scriviamo 5 lettere e rieffettuiamo solo il rendering del log della console all'interno di <FirstChild/> ! Eppure il <SecondChild/> non esegue affatto il re-rendering
Come mai?
Ricorda che react ri-renderizza il componente e tutti i bambini al suo interno se ci sono (ci sono) cambiamenti nello stato o negli oggetti. Nel primo esempio sopra abbiamo messo lo stato al componente genitore, quindi quando abbiamo digitato, anche Se c'erano componenti figlio che non usavano lo stato, è stato anche reso perché lo stato genitore è stato cambiato.
Quindi, sulla base di quella teoria, abbiamo spostato lo stato sull'unico componente che lo utilizzava. In questo modo, lo stato è cambiato solo all'interno di <FirstChild /> senza influenzare <SecondChild /> e il genitore.
Consigli semplici ma utili. ?
Riferimenti:
- https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster
- https://kentcdodds.com/blog/colocation
Suggested posts
Ricerca di informazioni sui nomi di dominio
Un estratto da Small, Sharp Software Tools di Brian P. Hogan
Quando fai una richiesta a facebook.com, il tuo computer cerca il nome di dominio per tradurre quel nome di dominio in un indirizzo IP in modo che il tuo computer possa effettuare quella connessione.
Evitare le conseguenze devastanti di un ictus: imparare dal viaggio di una famiglia.
Introduzione Un ictus è un'emergenza medica che può colpire chiunque in qualsiasi momento. Si verifica quando il flusso sanguigno verso una parte del cervello viene interrotto, portando a un'improvvisa perdita della funzione cerebrale.
Related posts
L'arte è sempre apolitica?
Ieri abbiamo chiuso le porte dell'Eurovision Song Contest di quest'anno con un gran finale scintillante e caotico in cui la cantante svedese Loreen ha portato a casa il trofeo, diventando la prima donna a vincere due volte e riportando la corona alla Svezia 50 anni dopo che gli ABBA hanno vinto la competizione con "Waterloo". Hanno continuato a diventare uno dei più grandi artisti nel canone della musica pop.
"La fossa delle Marianne svelata: svelare le terrificanti verità nascoste dell'abisso"
Introduzione:Benvenuti, coraggiosi lettori, in un viaggio che ci porterà nelle profondità più oscure del nostro pianeta. In questo blog, ci addentriamo nel mondo enigmatico della Fossa delle Marianne, scoprendo i suoi segreti nascosti e scoprendo le verità agghiaccianti che giacciono sotto la sua superficie.
Tieni traccia di chiunque abbia solo un numero di telefono | Indagine OSINT
Puoi essere un investigatore OSINT, un giocatore CTF o semplicemente qualcuno che riceve chiamate spam. Qualcuno che sta cercando di verificare il numero che hai visto in una pubblicità.
