React-avaimet, kyllä! Tarvitset niitä, mutta miksi juuri niitä?

On myös vielä yksi asia, joka sinun on muistettava, ja se on React Avain attribuutti, jokaisella renderöidyn listan elementillä on oltava se. Tämä käsite on yksi ensimmäisistä asioista, jotka jokainen front-end-kehittäjä oppii. React matkansa alussa. Tutkitaan nyt hieman syvällisemmin, miksi näin on ja milloin voimme käyttää oikoteitä.

Miksi tarvitsemme tätä avainominaisuutta?

Yksinkertaisin vastaus olisi "optimoida uudelleentulkintoja", mutta täydellisemmän vastauksen on ainakin mainittava käsite nimeltä React Täsmäytys. Tässä prosessissa selvitetään, miten käyttöliittymä päivitetään tehokkaimmalla mahdollisella tavalla. Jotta se onnistuisi nopeasti, React on päätettävä, mitkä elementtipuun osat on päivitettävä ja mitkä ei. DOM:ssä voi olla paljon elementtejä, ja jokaisen elementin vertailu sen päättämiseksi, mikä niistä päivitetään, on melko kallista. Tämän optimoimiseksi, React toteuttaa diffing-algoritmin, joka perustuu kahteen oletukseen:

1. Kaksi erityyppistä elementtiä ei koskaan ole samanlaisia - joten ne on renderöitävä uudelleen.
2. Kehittäjät voivat manuaalisesti auttaa optimoimaan tätä prosessia avainattribuuttien avulla, jotta elementit voidaan lokalisoida ja vertailla nopeammin, vaikka niiden järjestys olisikin muuttunut.

Tämän perusteella voidaan päätellä, että kukin React avain olisi myös oltava yksilöllinen (elementtiluettelon sisällä, ei globaalisti) ja vakaa (ei saisi muuttua). Mutta mitä voi tapahtua, jos ne eivät ole tat?

Ainutlaatuisuus, vakaus ja array-indeksi

Kuten aiemmin mainitsimme, React-näppäimet pitäisi olla vakaa ja ainutlaatuinen. Helpoin tapa saavuttaa tämä on käyttää yksilöllistä ID:tä (esimerkiksi tietokannasta) ja antaa se jokaiselle elementille, kun kartoitetaan matriisia, helppoa. Mutta entä tilanteet, joissa meillä ei ole ID:tä, nimeä tai muita yksilöllisiä tunnisteita, jotka voisimme siirtää kullekin elementille? No, jos emme välitä mitään avaimena, React ottaa oletusarvoisesti nykyisen array-indeksin (koska se on uniikki listan sisällä), mutta se antaa myös mukavan virheilmoituksen konsoliin:

Miksi näin on? Vastaus on se, että array-indeksi ei ole vakaa. Jos elementtien järjestys muuttuu, jokainen avain muuttuu ja meillä on ongelma. Jos React kohtaa tilanteen, jossa elementtien luettelon järjestystä on muutettu, se yrittää edelleen verrata niitä avainten perusteella, mikä tarkoittaa, että jokainen vertailu päättyy komponentin uudelleenrakentamiseen, minkä seurauksena koko luettelo rakennetaan uudelleen tyhjästä. Tämän lisäksi voimme törmätä joihinkin odottamattomiin ongelmiin, kuten komponenttien tilan päivityksiin elementeille, kuten hallitsemattomiin syötteisiin, ja muihin maagisiin vaikeasti debugattaviin ongelmiin.

Poikkeukset

Palataan takaisin array-indeksiin. Jos sitä käytetään React avain voi olla niin ongelmallista, miksi React käyttää sitä oletusarvoisesti? Onko olemassa käyttötapauksia, joissa se on ok tehdä niin? Vastaus on kyllä, käyttötapaus on staattiset luettelot. Jos olet varma, että renderöimäsi listan järjestys ei koskaan muutu, on turvallista käyttää array-indeksiä, mutta muista, että jos sinulla on yksilöllisiä tunnisteita, on silti parempi käyttää niitä. Voit myös huomata, että indeksien antaminen avaimina tekee tiedostosta React virheilmoitus katoaa ja samalla jotkut ulkoiset linerit näyttävät virheilmoituksen tai varoituksen. Tämä johtuu siitä, että indeksien nimenomaista käyttöä avaimina pidetään huonona käytäntönä, ja jotkin linterit saattavat pitää sitä virheenä. React itse pitää sitä "kehittäjät tietävät, mitä he tekevät" -tilanteena - joten älä tee sitä, ellet todella tiedä, mitä teet. Muutama esimerkki siitä, milloin tämän poikkeuksen käyttäminen voi olla ok, olisi pudotusvalikko, jossa on staattinen luettelo painikkeista, tai luettelon näyttäminen elementeistä, joissa on yrityksesi osoitetiedot.

Vaihtoehto tietokokonaisuuteen perustuvalle avaimelle

Oletetaan, että mikään edellä mainituista ei ole meille vaihtoehto. Meidän on esimerkiksi näytettävä merkkijonomääritykseen perustuva elementtiluettelo, joka voidaan monistaa, mutta se voidaan myös järjestää uudelleen. Tässä tapauksessa emme voi käyttää mitään merkkijonoja, koska ne eivät ole yksikäsitteisiä (tämä voi aiheuttaa myös joitakin maagisia virheitä), eikä array-indeksi ole tarpeeksi hyvä, koska muutamme elementtien järjestystä. Viimeinen asia, johon voimme luottaa tällaisissa tilanteissa, on joidenkin ulkoisten tunnisteiden käyttö. Muista, että sen on oltava vakaa, joten emme voi vain käyttää Math.random() -ohjelmaa. On olemassa joitakin NPM-paketteja, joita voimme käyttää tällaisissa tapauksissa, esimerkiksi "uuid" paketti. Tällaiset työkalut auttavat meitä pitämään luettelon avaimet vakaina ja ainutlaatuisina, vaikka emme löytäisikään aineistostamme oikeita tunnisteita. Meidän tulisi harkita tietokannan tunnisteen ja array-indeksin käyttöä (jos mahdollista) ensin, jotta minimoimme käyttämiemme pakettien määrän. projekti.

Lopuksi

• Jokainen elementti luettelossa React elementeillä olisi oltava yksilöllinen, vakaa avainattribuutti,
• React-näppäimet käytetään nopeuttamaan Täsmäytysprosessi ja välttää luetteloiden elementtien tarpeetonta uudelleenrakentamista,
• Paras lähde avaimille on syöttötietojen yksilöllinen tunniste (esimerkiksi tietokannasta),
• Voit käyttää sarjan indeksiä avaimena, mutta vain staattisessa luettelossa, jonka järjestys ei muutu,
• Jos ei ole muuta tapaa saada vakaita ja yksilöllisiä avaimia, kannattaa harkita ulkoisten tunnisteiden tarjoajien, esimerkiksi "uuid"-paketin, käyttöä.

Lue lisää:

Miksi sinun pitäisi (luultavasti) käyttää Typescriptiä?

Miten projektia ei saa tappaa huonoilla koodauskäytännöillä?

Tiedonhakustrategiat NextJS:ssä