Il funzionario Reagire documenti affermano che " React.PureComponent's shouldComponentUpdate()solo superficialmente confronta gli oggetti", e consiglia contro questo se lo stato è 'profonda'.

Detto questo, c'è qualche motivo per cui si dovrebbe preferire React.PureComponentquando si creano componenti React?

Domande :

• c'è qualche impatto sulle prestazioni nell'uso React.Componentche potremmo prendere in considerazione React.PureComponent?
• Immagino shouldComponentUpdate()di PureComponenteseguire solo confronti superficiali. In tal caso, non è possibile utilizzare tale metodo per confronti più approfonditi?
• "Inoltre, React.PureComponent's shouldComponentUpdate()salta prop aggiornamenti per tutta la sottostruttura componente" - Questo significa che le modifiche prop vengono ignorati?

La domanda è nata dalla lettura in questo blog medio , se aiuta.

La principale differenza tra React.PureComponente React.Componentis PureComponentfa un confronto superficiale sul cambio di stato. Significa che quando confronta i valori scalari confronta i loro valori, ma quando confronta gli oggetti confronta solo i riferimenti. Aiuta a migliorare le prestazioni dell'app.

Dovresti cercare React.PureComponentquando puoi soddisfare una delle condizioni seguenti.

• State / Props dovrebbe essere un oggetto immutabile
• State / Props non dovrebbe avere una gerarchia
• Dovresti chiamare forceUpdatequando i dati cambiano

Se stai usando React.PureComponent, assicurati che anche tutti i componenti figlio siano puri.

c'è qualche impatto sulle prestazioni nell'uso di React.component che potremmo prendere in considerazione per React.PureComponent?

Sì, aumenterà le prestazioni dell'app (a causa del confronto superficiale)

Immagino cheComponentUpdate () di Purecomponent esegua solo confronti superficiali. In tal caso, non è possibile utilizzare il suddetto metodo per confronti più approfonditi?

L'hai indovinato correttamente. Potresti usarlo se soddisfi una delle condizioni sopra menzionate.

"Inoltre, React.PureComponent's shouldComponentUpdate () salta gli aggiornamenti prop per l'intera sottostruttura del componente" - Significa che le modifiche prop vengono ignorate?

Sì, i cambi di prop verranno ignorati Se non riuscisse a trovare la differenza nel confronto superficiale.

Componente PureComponenthanno una differenza

PureComponentè esattamente lo stesso Componenttranne per il fatto che gestisce il shouldComponentUpdatemetodo per te.

Quando i puntelli o lo stato cambiano, PureComponentfaranno un confronto superficiale sia sui puntelli che sullo stato. Componentd'altra parte non confronterà gli oggetti di scena attuali e lo stato al prossimo out of the box. Pertanto, il componente eseguirà nuovamente il rendering per impostazione predefinita ogni volta che shouldComponentUpdateviene chiamato.

Confronto superficiale

Quando si confrontano gli oggetti di scena precedenti e lo stato con quello successivo, un confronto superficiale verificherà che le primitive abbiano lo stesso valore (ad esempio, 1 sia uguale a 1 o che vero sia uguale a vero) e che i riferimenti siano gli stessi tra valori javascript più complessi come oggetti e matrici.

Fonte: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

La differenza principale, a mio modo di vedere, è che un componente si ripete ogni volta che il suo genitore si ripete, indipendentemente dal fatto che i componenti e lo stato del componente siano cambiati.

Un componente puro, d'altra parte, non si ritrasferirà se il suo genitore si ripete, a meno che gli oggetti di scena (o lo stato) del componente puro non siano cambiati.

Ad esempio, supponiamo che abbiamo un albero dei componenti con una gerarchia a tre livelli: genitore, figli e nipoti.

Quando gli oggetti di scena del genitore vengono cambiati in modo tale da cambiare gli oggetti di scena di un solo figlio, allora:

• se tutti i componenti sono componenti regolari, verrà eseguito il rendering dell'intero albero dei componenti
• se tutti i figli e i nipoti sono componenti puri, allora solo un figlio si ridurrà e uno o tutti i suoi nipoti, a seconda che i loro oggetti di scena siano cambiati. Se ci sono molti componenti in questo albero dei componenti, ciò può significare un significativo aumento delle prestazioni.

A volte, tuttavia, l'utilizzo di componenti puri non avrà alcun impatto. Ho avuto un caso del genere quando il genitore ha ricevuto i suoi oggetti di scena da un negozio di redux e aveva bisogno di eseguire un calcolo complesso degli oggetti di scena dei suoi figli. Il genitore ha usato una lista piatta per rendere i suoi figli.

Il risultato è stato che ogni volta che si verificava anche una piccola modifica nell'archivio redux, l'intera matrice flatlist dei dati dei bambini veniva ricalcolata. Ciò significava che per ogni componente dell'albero, gli oggetti di scena erano nuovi oggetti, anche se i valori non erano cambiati.

In questo caso, i componenti puri non aiutano, e l'aumento delle prestazioni può essere ottenuto solo utilizzando componenti regolari e controllando i figli, in shouldComponentUpdate, se è necessario un rendering.