Perché le funzioni Arrow e il binding nel rendering di React sono problematici

(Suggerimento: rende shouldComponentUpdate e PureComponent irritabili)

In un post precedente, ho spiegato come estrarre i componenti figlio di React per evitare di utilizzare le funzioni bind o freccia nel rendering. Ma non ho fornito una demo chiara per mostrare perché questo è utile.

Ecco un rapido esempio.

In questo esempio, sto usando una funzione freccia nel rendering per associare l'ID utente pertinente a ciascun pulsante di eliminazione.

Alla riga 35, sto usando una funzione freccia per passare un valore alla funzione deleteUser. Questo é un problema.

Per capire perché, controlla User.js (fai clic sull'icona dell'hamburger in alto a sinistra per selezionare diversi file nell'esempio). Accedo alla console ogni volta che viene chiamato il rendering. Ho dichiarato Utente come PureComponent. Quindi l'utente dovrebbe rieseguire il rendering solo quando gli oggetti di scena o lo stato cambiano. Ma quando fai clic su Elimina per un utente, nota che il rendering viene chiamato per tutte le istanze utente .

Ecco perché: il componente genitore trasmette una funzione freccia sugli oggetti di scena. Le funzioni freccia vengono riallocate su ogni rendering (stessa storia con l'utilizzo di bind). Quindi, anche se ho dichiarato User.js come PureComponent, la funzione freccia nel genitore dell'utente fa sì che il componente Utente veda una nuova funzione inviata sugli oggetti di scena per tutti gli utenti. Così ogni utente Re-rendering quando qualsiasi pulsante Elimina viene cliccato. ?

Sommario:

Evita le funzioni freccia e i vincoli nel rendering. Interrompe le ottimizzazioni delle prestazioni come shouldComponentUpdate e PureComponent.

Cosa dovrei fare invece?

Per contrasto, ecco un esempio che non utilizza una funzione freccia nel rendering.

In questo esempio, index.js non ha la funzione freccia nel rendering. Invece, i dati rilevanti vengono trasmessi a User.js. In User.js, onDeleteClick chiama la funzione onClick passata su props con il relativo user.id.

Con questa modifica, quando fai clic su Elimina, nota che il rendering non viene chiamato per gli altri utenti! ?

Sommario

Per prestazioni ottimali,

  1. Evita le funzioni freccia e associa nel rendering.
  2. Come? Estrai componenti figlio o trasferisci dati sull'elemento HTML.

Cerchi di più su React? ⚛️

Ho creato più corsi React e JavaScript su Pluralsight (prova gratuita). Il mio ultimo, "Creazione di componenti React riutilizzabili" è appena stato pubblicato! ?

Cory House è l'autore di più corsi su JavaScript, React, clean code, .NET e altro su Pluralsight. È consulente principale di reactjsconsulting.com, un Software Architect presso VinSolutions, un Microsoft MVP, e forma gli sviluppatori di software a livello internazionale su pratiche software come lo sviluppo front-end e la codifica pulita. Cory twitta su JavaScript e sullo sviluppo front-end su Twitter come @housecor.