Reagire all'ottimizzazione di componenti funzionali e stateless tramite shouldComponentUpdate

Question

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.

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?

Answer 1

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.