Miks noolefunktsioonid ja sidumine React'i renderdamises on problemaatilised

(Näpunäide: see muudab elemendi peaks olema ComponentUpdate ja PureComponent vanker)

Eelmises postituses selgitasin, kuidas eraldada React lapse komponente, et vältida renderdamis- või noolefunktsioonide kasutamist. Kuid ma ei esitanud selget demot, et näidata, miks see kasulik on.

Siin on kiire näide.

Selles näites kasutan renderdamisel noolefunktsiooni, et siduda vastava kasutaja ID iga kustutusnupuga.

Reas 35 kasutan väärtuse edastamiseks funktsioonile deleteUser noolefunktsiooni. See on probleem.

Miks seda näha, vaadake lehte User.js (näites erinevate failide valimiseks klõpsake vasakus ülanurgas hamburgeriikooni). Login konsooli iga kord, kui renderdamist kutsutakse. Olen kuulutanud kasutaja PureComponentiks. Seega peaks kasutaja uuesti renderdama ainult siis, kui rekvisiidid või olek muutuvad. Kuid kui klõpsate kasutajal käsul Kustuta, pidage meeles, et renderdamist kutsutakse kõigi kasutajaeksemplaride jaoks .

Selle põhjus: vanemkomponent edastab rekvisiitidel noolefunktsiooni. Noolefunktsioonid jaotatakse igal renderdamisel ümber (sama lugu köitmist kasutades). Ehkki olen kuulutanud User.js-i PureComponentiks, põhjustab kasutaja vanema noolefunktsioon kasutajakomponendi nägemiseks uue funktsiooni kõigi kasutajate rekvisiitide saatmisel. Nii et iga kasutaja renderdab uuesti, kui klõpsatakse mis tahes kustutusnuppu. ?

Kokkuvõte:

Vältige renderdamisel noole funktsioone ja sidumisi. See rikub jõudluse optimeerimisi, nagu peaks olemaComponentUpdate ja PureComponent.

Mida peaksin selle asemel tegema?

Seevastu on siin näide, mis renderdamisel ei kasuta noole funktsiooni.

Selles näites pole index.js renderdamisel noolefunktsiooni. Selle asemel edastatakse asjakohased andmed User.js-le. Rakenduses User.js kutsub onDeleteClick funktsiooni onClick edastanud rekvisiitidele koos asjakohase user.id-ga.

Selle muudatusega klõpsake nupul Kustuta klõpsamisel, et renderdamist teistele kasutajatele ei nõuta! ?

Kokkuvõte

Optimaalse jõudluse tagamiseks

  1. Vältige noole funktsioone ja siduge renderdamisel.
  2. Kuidas? Eemaldage alamkomponendid või edastage HTML-elemendi andmed.

Kas otsite lisateavet Reacti kohta? ⚛️

Olen kirjutanud mitmetele Reakti ja JavaScripti kursustele Pluralsightis (tasuta prooviversioon). Minu uusim, äsja avaldatud “Korduvkasutatavate reaktiivkomponentide loomine”! ?

Cory House on Pluralsighti kohta mitme JavaScripti, Reacti, puhta koodi, .NETi ja muu kursuse autor. Ta on Microsofti MVP-i VinSolutions tarkvaraarhitekt reakjsconsulting.com peamine konsultant ning koolitab tarkvaraarendajaid rahvusvaheliselt tarkvarapraktikate osas, nagu esiotsa arendamine ja puhas kodeerimine. Cory säutsub JavaScripti ja kasutajaliidese arendamise kohta Twitteris aadressil @housecor.