Miért problematikusak a nyílfunkciók és a kötés a React renderelésében?

(Tipp: A shouldComponentUpdate és a PureComponent pergőssé teszi)

Egy korábbi bejegyzésemben elmagyaráztam, hogyan lehet kibontani a React gyermekkomponenseket, hogy elkerüljük a lekötés vagy nyíl függvények használatát a renderelésben. De nem készítettem egyértelmű bemutatót annak bemutatására, hogy ez miért hasznos.

Itt egy gyors példa.

Ebben a példában egy nyíl függvényt használok a renderelésben, hogy minden egyes törléshez hozzárendeljem a megfelelő felhasználói azonosítót.

A 35. sorban nyílfüggvényt használok, hogy átadjak egy értéket a deleteUser függvénynek. Az egy probléma.

Hogy miért, nézze meg a User.js oldalt (kattintson a hamburger ikonra a bal felső sarokban, hogy kiválasszon különböző fájlokat a példában). Minden alkalommal bejelentkezem a konzolra, amikor a render meghívásra kerül. A felhasználót PureComponent-ként nyilvánítottam. Tehát a felhasználónak csak akkor kell újra megjelenítenie, ha a kellékek vagy az állapot megváltozik. De amikor a felhasználóra kattint a törlés gombra, vegye figyelembe, hogy a render minden felhasználói példányhoz meghívásra kerül .

Ennek oka: A szülő komponens egy nyílfüggvényt ad át a kellékeken. A nyílfüggvényeket minden renderelésre átcsoportosítják (ugyanaz a történet a bind használatával). Tehát bár a User.js-t PureComponent-ként nyilvánítottam, a Felhasználó szülőben található nyílfüggvény arra készteti a Felhasználói komponenst, hogy minden felhasználó számára új funkciót küldjön a kellékekre. Tehát minden felhasználó újra megjelenít, ha bármelyik törlés gombra kattint. ?

Összegzés:

Kerülje a nyílfüggvényeket és a kötéseket a renderelésben. Megtöri a teljesítményoptimalizálásokat, mint például a shouldComponentUpdate és a PureComponent.

Mit tegyek helyette?

Ezzel szemben itt egy példa, amely nem használ nyílfüggvényt a renderelésben.

Ebben a példában az index.js nem tartalmaz nyílfüggvényt a renderelésben. Ehelyett a releváns adatokat továbbítják a User.js fájlnak. A User.js fájlban az onDeleteClick meghívja az onClick függvényt, amelyet a megfelelő user.id.

Ezzel a változtatással, amikor a törlés gombra kattint, vegye figyelembe, hogy a renderelés nincs meghívva a többi felhasználó számára! ?

Összegzés

Az optimális teljesítmény érdekében

  1. Kerülje a nyílfüggvényeket és kösse össze a renderelésben.
  2. Hogyan? Bontsa ki a gyermekkomponenseket, vagy adja át az adatokat a HTML-elemen.

További információt keres a React-ről? ⚛️

Több React és JavaScript tanfolyamot írtam a Pluralsight-on (ingyenes próbaverzió). Most megjelent legújabb, „Újrafelhasználható reaktorkomponensek létrehozása”! ?

Cory House több, a JavaScript, a React, a tiszta kód, a .NET és a Pluralsight témájú kurzusok szerzője. A reakjsconsulting.com vezető tanácsadója, a VinSolutions szoftver-építésze, a Microsoft MVP-je, és nemzetközi szinten képzi a szoftverfejlesztőket olyan szoftveres gyakorlatokra, mint a front-end fejlesztés és a tiszta kódolás. Cory a Twitteren @housecor néven tweetel a JavaScript-ről és a front-end fejlesztésről.