React atslēgas, Jā! Jums tās ir nepieciešamas, bet kāpēc tieši?

Ir vēl viena lieta, kas jums jāatceras, un tā ir. React Galvenais atribūtam jābūt katram atveidotā saraksta elementam. Šis jēdziens ir viena no pirmajām lietām, ko katrs front-end izstrādātājs uzzina par React ceļojuma sākumā. Tagad iedziļināsimies mazliet dziļāk, lai izpētītu, kāpēc tā notiek un kad varam izmantot īsākos ceļus.

Kāpēc mums ir nepieciešams šis galvenais atribūts?

Visvienkāršākā atbilde būtu “optimizēt atkārtotu pārsūtīšanu”, bet pilnīgākajā atbildē ir vismaz jāpiemin jēdziens. React Saskaņošana. Tas ir process, kurā tiek noskaidrots, kā visefektīvāk atjaunināt lietotāja saskarni. Lai to izdarītu ātri, React ir jāizlemj, kuras elementu koka daļas ir jāatjaunina un kuras ne. Problēma ir tāda, ka DOM var būt daudz elementu, un katra elementa salīdzināšana, lai noteiktu, kurš no tiem jāatjaunina, ir diezgan dārga. Lai to optimizētu, React ievieš diffing algoritmu, kura pamatā ir divi pieņēmumi:

1. Divu dažādu veidu elementi nekad nebūs vienādi - tāpēc tos renderējiet atkārtoti.
2. Izstrādātāji var manuāli palīdzēt optimizēt šo procesu, izmantojot atslēgas atribūtus, lai elementus, pat ja to secība ir mainījusies, varētu ātrāk lokalizēt un salīdzināt.

Pamatojoties uz to, mēs varam secināt, ka katrs React atslēga jābūt unikālam (elementu sarakstā, nevis globāli) un stabilam (nedrīkst mainīties). Bet kas var notikt, ja tie nav tādi?

Unikalitāte, stabilitāte un masīva indekss

Kā jau minējām iepriekš, React atslēgas jābūt stabilam un unikālam. Visvienkāršākais veids, kā to panākt, ir izmantot unikālu ID (piemēram, no datubāzes) un, kartējot masīvu, nodot to katram elementam. Bet ko darīt situācijās, kad mums nav ID, nosaukuma vai citu unikālu identifikatoru, ko nodot katram elementam? Nu, ja mēs neko nenododam kā atslēgu, React pēc noklusējuma izmantos pašreizējā masīva indeksu (jo tas ir unikāls šajā sarakstā), lai apstrādātu to, lai mums, bet tas arī sniegs mums jauku kļūdas ziņojumu konsoles logā:

Kāpēc tas tā ir? Atbilde ir tāda, ka masīva indekss nav stabils. Ja mainās elementu secība, mainās arī katrs no atslēgām, un rodas problēma. Ja React sastopas ar situāciju, kad elementu secība sarakstā ir mainīta, tas joprojām mēģinās tos salīdzināt pēc atslēgām, tas nozīmē, ka katrs salīdzinājums beigsies ar komponenta pārbūvi un rezultātā viss saraksts tiks pārbūvēts no jauna. Turklāt mēs varam saskarties ar dažām neparedzētām problēmām, piemēram, komponenta stāvokļa atjauninājumiem elementiem, piemēram, nekontrolējamām ievadēm, un citām maģiskām, grūti atkļūdošanas problēmām.

Izņēmumi

Atgriezīsimies pie masīva indeksa. Ja lietojam to kā React atslēga var būt tik problemātiska, kāpēc React to izmantos pēc noklusējuma? Vai ir kāds lietojuma gadījums, kad to var darīt? Atbilde ir jā, šāds lietojuma gadījums ir statiskie saraksti. Ja esat pārliecināts, ka atveidotais saraksts nekad nemainīs savu secību, droši varat izmantot masīva indeksu, bet atcerieties, ka, ja jums ir kādi unikāli identifikatori, to vietā tomēr labāk izmantot tos. Jūs varat arī pamanīt, ka, nododot indeksus kā atslēgas, tiks veikta React kļūdas ziņojums pazūd, vienlaikus izraisot dažu ārējo linteru kļūdu vai brīdinājumu. Tas ir saistīts ar to, ka tieša indeksu izmantošana kā atslēgas tiek uzskatīta par sliktu praksi un daži linteri to var uzskatīt par kļūdu, bet daži linteri to var uzskatīt par kļūdu. React pati uzskata, ka tā ir “izstrādātāji zina, ko viņi dara” situācija - tāpēc nedariet to, ja vien jūs patiešām nezināt, ko darāt. Daži piemēri, kad šo izņēmumu var izmantot labi, būtu izlaižamā loga ar statisku pogu sarakstu vai elementu saraksta rādīšana ar jūsu uzņēmuma adreses informāciju.

Alternatīva uz datu kopu balstītai atslēgai

Pieņemsim, ka neviens no iepriekš minētajiem variantiem mums nav piemērots. Piemēram, mums ir jāattēlo elementu saraksts, kura pamatā ir virkņu masīvs, ko var dublēt, bet var arī pārkārtot. Šajā gadījumā mēs nevaram izmantot nevienu no virknēm, jo tās nav unikālas (tas var radīt arī burvju kļūdas), un masīva indekss nav pietiekami labs, jo mēs mainīsim elementu secību. Pēdējais, uz ko varam paļauties šādās situācijās, ir dažu ārējo identifikatoru izmantošana. Atcerieties, ka tam ir jābūt stabilam, tāpēc mēs nevaram vienkārši izmantot Math.random(). Ir dažas NPM pakotnes, ko varam izmantot šādos gadījumos, piem. “uuid” iepakojums. Šādi rīki var palīdzēt mums saglabāt mūsu saraksta atslēgas stabilas un unikālas, pat ja mēs nevaram atrast pareizus identifikatorus mūsu sistēmā. dati komplekts. Mums vispirms jāapsver datu bāzes ID un masīva indeksa izmantošana (ja iespējams), lai līdz minimumam samazinātu pakešu skaitu, ko izmanto mūsu projekts.

Lai to pabeigtu

• Katrs elements sarakstā React elementiem jābūt unikālam, stabilam atslēgas atribūtam,
• React atslēgas tiek izmantoti, lai paātrinātu Saskaņošanas process un izvairīties no nevajadzīgas sarakstu elementu pārbūves,
• Labākais atslēgu avots ir datu ievades unikālais ID (piemēram, no datubāzes),
• Masīva indeksu var izmantot kā atslēgu, bet tikai statiskam sarakstam, kura secība nemainīsies,
• Ja nav cita veida, kā iegūt stabilas un unikālas atslēgas, apsveriet iespēju izmantot kādu ārējo ID nodrošinātāju, piemēram, pakotni “uuid”.

Lasīt vairāk:

Kāpēc jums (iespējams) vajadzētu izmantot Typescript

Kā nenogalināt projektu ar sliktu kodēšanas praksi?

Datu iegūšanas stratēģijas NextJS