React “keys” atribūts elementiem…

Viena svarīga React izmantošanas priekšrocība ir tā spēja automātiski optimizēt atjauninājumus jūsu lietotāja saskarnēs vai UI. Ja React būtu lidmašīna, vairumā gadījumu tā izmantotu autopilota režīmu, ļaujot jums atpūsties vadītāja sēdeklī. Bet pat ar autopilotu jums dažreiz būs jāiesaistās, lai to pareizi piemērotu, piemēram, jāveic konkrēts manevrs, lai nosēdinātu lidmašīnu. Tas pats attiecas uz React, jo ir gadījumi, kad jums kā izstrādātājam ir jāveic papildu darbības, lai norādītu, kā React jārīkojas, mainoties lietotāja saskarnei.

Šajā rakstā jūs izpētīsiet, kā izmantot “KEYS“, strādājot ar elementu sarakstiem, kā izmantot keys, lai identificētu un atšķirtu elementus sarakstā un kā noteikt pareizo keys saraksta vienumiem – kā arī to, ko nepareiza keys lietošana nozīmē jūsu lietotnes veiktspējai.

Tā kā React pēc noklusējuma ir ātrs un izstrādāts, ņemot vērā sākotnējo veiktspēju, jums parasti nav jādomā par UI atjauninājumiem. Aprēķinot izmaiņas, React izmanto savu *Diffing algoritmu, lai aprēķinātu minimālo izmaiņu skaitu, kas nepieciešams, lai veiktu atjaunināšanu jūsu komponentu kokā. Lai gan šis algoritms lielāko daļu laika darbojas nevainojami, kā minēts iepriekš, ir daži gadījumi, kad React nevar izdarīt svarīgus pieņēmumus, lai atrastu optimālāko atjaunināšanas ceļu, kas nozīmē, ka izstrādātājam būs jāiejaucas.

Izpētīsim vienu šādu Diffing algoritma piemēru

Iedomājieties dzērienu sadaļu kāda bāra tiešsaistes dzērienkartē, kur restorānu vadītāji var pievienot jaunus dzērienus atkarībā no sezonas. Kad viņi saraksta beigās pievieno jaunu elementu, Diff algoritms darbojas labi, jo React saskaņos divus alus kokus, divus vīna kokus un pēc tam ievietos sidra koku. Tomēr, ievietojot jaunu elementu saraksta sākumā, algoritms piedāvā sliktāku veiktspēju, jo React mainīs katru “bērnu”, nevis sapratīs, ka tas var saglabāt neskartus alus un vīna apakškokus.

<ul>

<li>Alus</li>

<li>Vīns</li>

</ul>

Šī neefektivitāte var būt problēma. Lai atrisinātu šo problēmu, React atbalsta keys atribūtu.

<ul>

<li>Alus</li>
<li>Vīns</li>

</ul>

<ul>

<li>Alus</li>
<li>Vīns</li>

<li>Sidrs</li>

</ul>

Kas ir KEYS?

KEYS ir identifikatori, kas palīdz reaģēt, lai noteiktu, kuri vienumi ir mainīti, pievienoti vai noņemti. Tie arī norāda, kā apstrādāt konkrētu elementu, kad notiek atjauninājums, un vai tā iekšējais stāvoklis ir jāsaglabā vai nē. Lai to ilustrētu, keys pievienošana pēdējam piemēram var padarīt koka pārveidošanu efektīvu. Tas ir tāpēc, ka React tagad zina, ka elements ar keys Sidram ir jauns un elementi ar keys, alu un vīnu ir tikko pārvietoti.

<ul>

<li key="alus">Alus</li>

<li key="vīns">Vīns</li>

</ul>




<ul>

<li key="sidrs">Sidrs</li>

<li key="alus">Alus</li>

<li key="vīns">Vīns</li>

</ul>

Keys identifikatoru piemērošana

Galvenais noteikums ar keys ir izmantot stabilu identifikatoru, kas ir unikāls starp saviem “brāļiem” un “māsām”. Tas ļauj React atkārtoti izmantot pēc iespējas vairāk elementu no saraksta, izvairoties no nevajadzīgas pārveidošanas, it īpaši, ja to saturs ir tieši tāds pats un vienīgais, kas ir mainījies, ir to atrašanās vieta sarakstā.

Visbiežāk izmantotais keys ir unikāls ID, kas iegūts no jūsu datiem. Šie ID parasti atspoguļo datu bāzes ID, kuram ir piešķirts ID vienumam datu bāzē, kas pēc būtības ir garantēts unikāls. Bet kas notiek gadījumos, kad jūsu datiem nav piemērota ID vai jūs veidojat sarakstu, kas nav atkarīgs no servera datiem? Šādos scenārijos varat domāt, ka pietiek ar savu unikālo ID ģenerēšanu neatkarīgi no tā, vai to darāt, izmantojot ārēju bibliotēku vai “nejaušinātāja” funkciju, piemēram, iebūvēto funkciju math.random. Tomēr, kāpēc šī pieeja patiešām ļaus izvairīties no sadursmēm jūsu keys, kas nozīmē, ka tā neradīs divus vienādus keys, tā nesaglabās jūsu saraksta vienumu iekšējo stāvokli. Tas ir tāpēc, ka, veicot atkārtotu renderēšanu, šīs keys būs atšķirīgas, kā rezultātā React būs jāizveido jūsu saraksts no jauna. Kā pēdējo līdzekli varat izmantot preču indeksu. Tā kā tas nosaka katra elementa pozīciju sarakstā, tas garantē dublikātu neesamību, taču indeksi nav ieteicami priekš keys, ja vienumu secība var mainīties, piemēram, ja jūsu sarakstam ir kārtošanas iespējas vai lietotāji var pievienot vai noņemt vienumus. Ja keys tiek izmantotas nepareizi, tās var negatīvi ietekmēt veiktspēju un, atjauninot sarakstu, var izraisīt neparedzētas darbības saskarnes kļūmes.

Tāpēc ir ļoti svarīgi pieņemt apzinātu lēmumu par keys ieviešanu.

Tagad esat iepazīstināts ar React keys jeb “atslēgu” izmantošanu un to izmantošanu, strādājot ar vienumu sarakstiem, piemēram, izmantojot keys, lai atšķirtu saraksta elementus, izvēloties pareizo keys un nepareizas keys lietošanas ietekmi uz lietotnes veiktspēju. Galvenais ir vienmēr izmantot keys, kas ir garantēta unikāla starp saviem “brāļiem” un “māsām”. Ja iespējams, izmantojiet unikālus ID no saviem datiem. Varat izmantot indeksus kā pēdējo līdzekli, taču neaizmirstiet, ka šī pieeja nedarbosies, ja saraksta vienumu secība var mainīties. Tālāk jums būs iespēja praksē izmantot keys saraksta komponentos.

Par KEYS izmantošanu praksē rakstīšu jau nākošajos rakstos.

* “Diffing algorithm” latviešu valodā varētu tulkot kā “Atšķirību algoritms”. Tas ir algoritms, ko izmanto React, lai noteiktu atšķirības starp divām koka struktūrām un veiktu efektīvus atjauninājumus DOM (Dokumenta Objekta Modelis). Diffing algoritms palīdz React optimizēt renderēšanas procesu un nodrošina ātru lietotnes darbību.