2016-07-14 33 views
10

So che un punto chiave dell'ottimizzazione per React è l'utilizzo del gancio del ciclo di vita shouldComponentUpdate() per controllare lo stato corrente/oggetti di scena rispetto ai puntelli successivo/di stato.Reagire all'ottimizzazione di componenti funzionali e stateless tramite shouldComponentUpdate

Se sto creando un'applicazione React utilizzando principalmente componenti funzionali, piuttosto che componenti basati sullo stato, che hanno accesso agli hook del ciclo di vita, devo rinunciare a questa particolare ottimizzazione? Posso eseguire un controllo simile all'interno di un componente funzionale?

+0

Non è possibile eseguire il controllo analogo in componenti funzionali stateless, poiché restituisce lo stesso risultato a parità di oggetto/stato. E non ha accesso a nextProps/nextState. –

+0

Ciò significa che i componenti stateless rinunciano a questa ottimizzazione? Sono meno performanti come risultato? – Himmel

+0

@ Himmel ho capito male la tua domanda. Ha fatto un altro tentativo! :-) – Timo

risposta

10

componenti stateless sono candidati per l'ottimizzazione in futuro e la documentazione accennano senza entrare nei dettagli:

In un mondo ideale, la maggior parte dei componenti sarebbe funzioni apolidi perché in futuro faremo anche essere in grado di ottimizzare le prestazioni specifiche per questi componenti evitando controlli non necessari e allocazioni di memoria. Questo è il modello raccomandato, quando possibile.

Source


Attualmente tuttavia, i componenti senza stato non mi ottimizzare le prestazioni saltando il processo di rendering, se gli oggetti di scena sono invariati. Ciò è stato confermato da un membro della squadra reagire:

Per componenti complessi, definendo shouldComponentUpdate generalmente superare i vantaggi prestazionali dei componenti stateless (es puro rendering.). Le frasi nei documenti suggeriscono alcune ottimizzazioni future che abbiamo pianificato, per cui non assegneremo un'istanza interna per componenti funzionali stateless (chiameremo semplicemente la funzione). Potremmo anche non continuare a tenere i puntelli, ecc. Piccole ottimizzazioni. Non parliamo dei dettagli nei documenti perché le ottimizzazioni non sono ancora implementate (i componenti stateless aprono le porte a queste ottimizzazioni).

[...]

Ci sono discussioni di avere una bandiera pureRender che è possibile impostare la funzione, o il suo partecipare al ciclo di vita shouldUpdate, ma non è attualmente implementati. Al momento, le funzioni stateless non possono essere render puri.

Vale la pena ricordare che a volte le persone abusano/esagerano il rendering puro; a volte può essere più costoso o più costoso rispetto all'esecuzione del rendering, perché si sta ripetendo l'array di oggetti di scena e potenzialmente facendo cose come il confronto tra stringhe, che è solo un lavoro extra per i componenti che alla fine restituiscono true e quindi procedono comunque al rerender. PureRender/shouldComponentUpdate è davvero considerato un escape hatch per le prestazioni e non è necessariamente qualcosa che dovrebbe essere applicato ciecamente a ogni componente.

Source


mio asporto da questa discussione è che in certi casi per componenti complessi, la prestazione può essere aumentata mediante l'attuazione di shouldComponentUpdate rispetto ai componenti senza stato. D'altro canto, vorrei fortemente valutare se i benefici in termini di prestazioni sono abbastanza significativi da compensare la maggiore complessità e l'ingombro maggiore del componente.

Problemi correlati