(Sugestie: face ca shouldComponentUpdate și PureComponent să fie ciudate)

Într-o postare anterioară, am explicat cum să extrage Reactează componentele copil pentru a evita utilizarea funcțiilor de legare sau săgeată în randare. Dar nu am oferit o demonstrație clară pentru a arăta de ce este util acest lucru.

Iată un exemplu rapid.

În acest exemplu, folosesc o funcție săgeată în randare pentru a lega ID-ul de utilizator relevant la fiecare buton de ștergere.

Pe linia 35, folosesc o funcție săgeată pentru a transmite o valoare funcției deleteUser. Asta e o problema.

Pentru a vedea de ce, consultați User.js (faceți clic pe pictograma hamburger din stânga sus pentru a selecta diferite fișiere din exemplu). Mă conectez la consolă de fiecare dată când se apelează redarea. Am declarat Utilizator ca PureComponent. Deci, utilizatorul ar trebui să redea redarea numai atunci când recuzita sau schimbarea stării. Dar când faceți clic pe ștergere pentru un utilizator, rețineți că este necesară redarea toate Instanțe de utilizator.

Iată de ce: Componenta părinte transmite o funcție săgeată pe recuzită. Funcțiile săgeată sunt realocate pe fiecare randare (aceeași poveste cu utilizarea bind). Deci, deși am declarat User.js ca un PureComponent, funcția săgeată din părintele utilizatorului face ca componenta utilizator să vadă o nouă funcție trimisă pe recuzită pentru toți utilizatorii. Deci, fiecare utilizator redă când orice se face clic pe butonul de ștergere. ?

ad-banner

Rezumat:

Evitați funcțiile săgeții și se leagă în randare. Se sparge optimizările de performanță, cum ar fi shouldComponentUpdate și PureComponent.

Ce ar trebui să fac în schimb?

Pentru contrast, iată un exemplu care nu folosește o funcție săgeată în randare.

În acest exemplu, index.js nu are nicio funcție săgeată în randare. În schimb, datele relevante sunt transmise către User.js. În User.js, onDeleteClick apelează funcția onClick transmisă pe recuzită cu user.id-ul relevant.

Cu această modificare, când faceți clic pe ștergere, observați că randarea nu este apelată pentru ceilalți utilizatori! ?

rezumat

Pentru performanțe optime,

  1. Evitați funcțiile săgeții și legați în randare.
  2. Cum? Extrageți componentele copil, sau treceți date pe elementul HTML.

Căutați mai multe despre React? ⚛️

Am scris multiple cursuri React și JavaScript pe Pluralsight (încercare gratuită). Ultimul meu, „Crearea componentelor React reutilizabile”Tocmai publicat! ?

Model de reactie tipuri de propulsii centralizate

Casa Cory este autorul mai multe cursuri despre JavaScript, React, cod curat, .NET și multe altele pe Pluralsight. Este consultant principal la reactjsconsulting.com, un arhitect software la VinSolutions, un Microsoft MVP și instruiește dezvoltatorii de software la nivel internațional în practici software cum ar fi dezvoltarea front-end și codificarea curată. Cory tweetează despre JavaScript și dezvoltarea front-end pe Twitter ca. @housecor.