Reagire shouldComponentUpdate() viene chiamato anche quando puntelli o statale di tale componente non è cambiata

Question

ho aggiunto il metodo del ciclo di vita alla mia componente Reagire

shouldComponentUpdate(nextProps, nextState) { 
    console.log(nextProps, nextState); 
    console.log(this.props, this.state); 

    return false; 
    }, 

Il mio problema è che questo metodo viene chiamato sul componente anche quando nextProps, e nextState, è esattamente lo stesso dei puntelli e dello stato attuali. Quando confronto le istruzioni di console.log per nextProps e this.props sono esattamente le stesse. Lo stesso con lo stato.

Quindi, perché è necessario chiamareComponentUpdate?

Viene chiamato ogni volta che cambio lo stato del componente principale. Ma nessuno dei puntelli o dello stato sta cambiando sul componente reale. Allora perché si chiama?

FYI, sto usando reagire con Meteor

ulteriori chiarimenti:

Mi chiedo il motivo per cui la funzione shouldComponentUpdate è chiamata, in primo luogo. Nessuno stato o oggetti di scena di quel componente stanno cambiando. Ma lo stato del componente genitore sta cambiando.

Answer 1

Reagisce automaticamente al numero shouldComponentUpdate, viene attivato prima dell'avvio del processo di re-rendering (in questo caso del componente principale). Pertanto, viene chiamato frequentemente.

L'implementazione predefinita di questa funzione restituisce true modo per fermare la ri-renderizzare è necessario restituire false qui:

shouldComponentUpdate(nextProps, nextState) { 
    console.log(nextProps, nextState); 
    console.log(this.props, this.state); 

    return false; 
    } 

Advanced Concerns, React page

Così, in sintesi, Reagire evita di effettuare costosi Operazioni DOM necessarie per riconciliare sottoalberi del DOM consentendo all'utente di cortocircuitare il processo utilizzando shouldComponentUpdate,

Answer 2

Lo scopo di shouldComponentUpdate è indicare se è necessario chiamare render. Nel tuo caso un componente genitore ha eseguito il rendering e ha indicato che voleva anche eseguire il rendering di un'istanza del componente figlio.

shouldComponentUpdate è la tua occasione per cortocircuitare quella render e dire 'non disturbare, nulla è cambiato qui sotto'.

Ora, alla tua domanda, "perché è stato chiamato anche perché non è cambiato nulla"? React non confronta gli oggetti di scena vecchi e nuovi. È possibile ottenere un mixin per farlo per voi, (ad esempio PureRenderMixin), ma per impostazione predefinita React consente solo l'esecuzione del rendering.

Il motivo per cui React non esegue il confronto è per un paio di motivi. In primo luogo, i risparmi in termini di prestazioni del rendering di salto possono essere trascurabili rispetto all'analisi di oggetti di scena e stato. Poiché il meccanismo di rendering di React è già ottimizzato per evitare la manipolazione DOM inutile, può solo presupporre che il componente debba essere aggiornato e aspettarsi prestazioni ragionevoli. In secondo luogo, fare il confronto non è esattamente semplice. Il tuo prop è un primitivo ?, un immutabile ?, un array ?, un oggetto complesso ?, sarà necessario un confronto profondo?

Il modello di React è "Renderemo tutto ciò che viene richiesto per impostazione predefinita. Se desideri rinunciare a qualcosa per le prestazioni, vai avanti e dicci implementando shouldComponentUpdate".

Answer 3

shouldComponentUpdate() è chiamato ogni volta:

• gli oggetti di scena sono aggiornati da ogni ri-rendering del componente principale. Questo include tutti gli scenari in cui il re-rendering avviene con esattamente gli stessi valori di prop.
• lo stato viene aggiornato con una chiamata a setState() (l'unico modo consentito da reagire). Questo include tutti gli scenari in cui il valore dello stato è esattamente lo stesso.

A volte può essere utile lasciare passare il ciclo di re-rendering, anche se il nuovo valore è esattamente uguale al vecchio valore. Per esempio. quando il tuo componente riceve un ID utente (potrebbe essere invariato) attraverso oggetti di scena, e recupera nuovi messaggi da qualche parte e li mette in stato.

Inoltre, 'shouldComponentUpdate() `, come un metodo separato per verificare le modifiche e solo aggiornamento se qualcosa è cambiato, rende per bel codice mantenibile:

• fare una prima versione senza shouldComponentUpdate(), e assicurarsi che il lo stesso insieme di oggetti di scena e stato portano allo stesso risultato che viene reso.
• metti e di debug shouldComponentUpdate()

È relativamente facile debug di un 'macchina a stati' che riceve l'input (stato e puntelli) e rende uscita. È molto più difficile eseguire il debug di una macchina che gestisce le modifiche di stato.