Zašto su funkcije strelice i vezanje u React's Renderu problematične

(Savjet: Čini shouldComponentUpdate i PureComponent neskladnim)

U prethodnom postu objasnio sam kako izvući podređene komponente React kako bi se izbjeglo korištenje veza ili funkcija strelice u prikazivanju. Ali nisam pružio jasnu demonstraciju kako bih pokazao zašto je ovo korisno.

Evo kratkog primjera.

U ovom primjeru koristim funkciju strelice u renderu za vezanje relevantnog korisničkog ID-a na svaki gumb za brisanje.

U retku 35 koristim funkciju strelice za prosljeđivanje vrijednosti funkciji deleteUser. To je problem.

Da biste vidjeli zašto, pogledajte User.js (kliknite ikonu hamburgera u gornjem lijevom kutu da biste odabrali različite datoteke u primjeru). Prijavljujem se na konzolu svaki put kad se pozove generiranje. Proglasio sam korisnika PureComponentom. Dakle, Korisnik bi se trebao ponovno prikazati samo kada se rekviziti ili stanje promijene. Ali kada kliknete na delete za korisnika, imajte na umu da se render poziva za sve instance korisnika .

Evo zašto: Nadređena komponenta prenosi funkciju strelice na rekvizite. Funkcije strelica preraspodjeljuju se na svakom renderu (ista priča s korištenjem vezanja). Dakle, iako sam User.js proglasio PureComponentom, funkcija strelice u roditelju korisnika uzrokuje da komponenta User vidi novu funkciju koja se šalje na rekvizitima za sve korisnike. Tako se svaki korisnik ponovno prikazuje kad se klikne bilo koji gumb za brisanje. ?

Sažetak:

Izbjegavajte funkcije strelica i vezove u prikazivanju. Razbija optimizaciju izvedbe poput shouldComponentUpdate i PureComponent.

Što da radim umjesto toga?

Nasuprot tome, evo primjera koji u renderu ne koristi funkciju strelice.

U ovom primjeru index.js nema funkciju strelice u generiranju. Umjesto toga, relevantni podaci prenose se na User.js. U User.js onDeleteClick poziva funkciju onClick proslijeđenu na rekvizitima s relevantnim user.id.

Ovom promjenom, kad kliknete na delete, primijetite da se prikaz ne poziva za ostale korisnike! ?

Sažetak

Za optimalne performanse,

  1. Izbjegavajte funkcije strelica i vežite ih u renderu.
  2. Kako? Izdvojite podređene komponente ili prenesite podatke na HTML element.

Tražite li više o Reactu? ⚛️

Napisao sam više tečajeva React-a i JavaScript-a na Pluralsight-u (besplatna proba). Upravo objavljen moj najnoviji "Stvaranje komponenata za reakciju za višekratnu upotrebu"! ?

Cory House autor je više tečajeva o JavaScript-u, React-u, čistom kodu, .NET-u i više o Pluralsightu. Glavni je savjetnik u tvrtki reakjsconsulting.com, softverski arhitekt u tvrtki VinSolutions, Microsoftovom MVP-u, te međunarodno osposobljava programere softverskih praksi poput front-end razvoja i čistog kodiranja. Cory tweeta o JavaScript-u i front-end razvoju na Twitteru kao @housecor.