Hvorfor pilefunktioner og binde i React's Render er problematiske

(Tip: Det gør shouldComponentUpdate og PureComponent cranky)

I et tidligere indlæg forklarede jeg, hvordan man udtrækker React-underordnede komponenter for at undgå at bruge bind- eller pilfunktioner i gengivelse. Men jeg leverede ikke en klar demo for at vise, hvorfor dette er nyttigt.

Her er et hurtigt eksempel.

I dette eksempel bruger jeg en pilefunktion i gengivelse for at binde det relevante bruger-id til hver sletningsknap.

På linje 35 bruger jeg en pilefunktion til at overføre en værdi til deleteUser-funktionen. Det er et problem.

For at se hvorfor, tjek User.js (klik på hamburgerikonet øverst til venstre for at vælge forskellige filer i eksemplet). Jeg logger på konsollen hver gang render kaldes. Jeg har erklæret bruger som en PureComponent. Så brugeren skal kun gengive igen, når rekvisitter eller tilstand ændres. Men når du klikker på slet for en bruger, skal du bemærke, at gengivelse kaldes til alle brugerinstanser .

Her er hvorfor: Den overordnede komponent sender en pilefunktion ned på rekvisitter. Pilefunktioner omfordeles på hver gengivelse (samme historie med brug af bind). Så selvom jeg har erklæret User.js som en PureComponent, får pilfunktionen i User's overordnede brugerkomponenten til at se, at en ny funktion sendes ind på rekvisitter til alle brugere. Så hver bruger gengives igen, når der klikkes på en hvilken som helst sletningsknap. ?

Resumé:

Undgå pilfunktioner og bindinger i gengivelse. Det bryder ydeevneoptimeringer som shouldComponentUpdate og PureComponent.

Hvad skal jeg gøre i stedet?

For kontrast er her et eksempel, der ikke bruger en pilefunktion til gengivelse.

I dette eksempel har index.js ingen pilfunktion i gengivelse. I stedet overføres de relevante data til User.js. I User.js kalder onDeleteClick den onClick-funktion, der sendes til rekvisitter med den relevante user.id.

Når du klikker på Slet, skal du bemærke, at gengivelsen ikke kaldes for de andre brugere med denne ændring! ?

Resumé

For optimal ydeevne

  1. Undgå pilfunktioner og bind i gengivelse.
  2. Hvordan? Uddrag underordnede komponenter, eller videregiv data til HTML-elementet.

Leder du efter mere om React? ⚛️

Jeg har skrevet flere React- og JavaScript-kurser om Pluralsight (gratis prøveperiode). Min seneste "Oprettelse af genanvendelige reaktionskomponenter" er netop offentliggjort! ?

Cory House er forfatter til flere kurser om JavaScript, React, ren kode, .NET og mere om Pluralsight. Han er hovedkonsulent hos reactjsconsulting.com, en softwarearkitekt hos VinSolutions, en Microsoft MVP og træner softwareudviklere internationalt i softwarepraksis som front-end-udvikling og ren kodning. Cory tweets om JavaScript og front-end-udvikling på Twitter som @housecor.