{"id":3540,"date":"2021-07-24T08:53:39","date_gmt":"2021-07-24T08:53:39","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/react-keys-yes-you-need-them-but-why-exactly\/"},"modified":"2026-04-24T11:30:22","modified_gmt":"2026-04-24T11:30:22","slug":"reagoida-avaimet-kylla-tarvitset-niita-mutta-miksi-juuri","status":"publish","type":"post","link":"https:\/\/thecodest.co\/fi\/blog\/react-keys-yes-you-need-them-but-why-exactly\/","title":{"rendered":"React-avaimet, kyll\u00e4! Tarvitset niit\u00e4, mutta miksi juuri niit\u00e4?"},"content":{"rendered":"

On my\u00f6s viel\u00e4 yksi asia, joka sinun on muistettava, ja se on React<\/a> Avain<\/strong> attribuutti, jokaisella render\u00f6idyn listan elementill\u00e4 on oltava se. T\u00e4m\u00e4 k\u00e4site on yksi ensimm\u00e4isist\u00e4 asioista, joita jokainen etusivun kehitt\u00e4j\u00e4<\/a> saa tiet\u00e4\u00e4 React<\/strong> matkansa alussa. Tutkitaan nyt hieman syv\u00e4llisemmin, miksi n\u00e4in on ja milloin voimme k\u00e4ytt\u00e4\u00e4 oikoteit\u00e4.<\/p>\n

Miksi tarvitsemme t\u00e4t\u00e4 avainominaisuutta?<\/h2>\n

Yksinkertaisin vastaus olisi \"optimoida uudelleentulkintoja\", mutta t\u00e4ydellisemm\u00e4n vastauksen on ainakin mainittava k\u00e4site nimelt\u00e4 React T\u00e4sm\u00e4ytys<\/strong>. T\u00e4ss\u00e4 prosessissa selvitet\u00e4\u00e4n, miten k\u00e4ytt\u00f6liittym\u00e4 p\u00e4ivitet\u00e4\u00e4n tehokkaimmalla mahdollisella tavalla. Jotta se onnistuisi nopeasti, React<\/strong> on p\u00e4\u00e4tett\u00e4v\u00e4, mitk\u00e4 elementtipuun osat on p\u00e4ivitett\u00e4v\u00e4 ja mitk\u00e4 ei. DOM:ss\u00e4 voi olla paljon elementtej\u00e4, ja jokaisen elementin vertailu sen p\u00e4\u00e4tt\u00e4miseksi, mik\u00e4 niist\u00e4 p\u00e4ivitet\u00e4\u00e4n, on melko kallista. T\u00e4m\u00e4n optimoimiseksi, React<\/strong> toteuttaa diffing-algoritmin, joka perustuu kahteen oletukseen:<\/p>\n

    \n
  1. Kaksi erityyppist\u00e4 elementti\u00e4 ei koskaan ole samanlaisia - joten ne on render\u00f6it\u00e4v\u00e4 uudelleen.<\/li>\n
  2. Kehitt\u00e4j\u00e4t voivat manuaalisesti auttaa optimoimaan t\u00e4t\u00e4 prosessia avainattribuuttien avulla, jotta elementit voidaan lokalisoida ja vertailla nopeammin, vaikka niiden j\u00e4rjestys olisikin muuttunut.<\/li>\n<\/ol>\n

    T\u00e4m\u00e4n perusteella voidaan p\u00e4\u00e4tell\u00e4, ett\u00e4 kukin React avain<\/strong> olisi my\u00f6s oltava yksil\u00f6llinen (elementtiluettelon sis\u00e4ll\u00e4, ei globaalisti) ja vakaa (ei saisi muuttua). Mutta mit\u00e4 voi tapahtua, jos ne eiv\u00e4t ole tat?<\/p>\n

    Ainutlaatuisuus, vakaus ja array-indeksi<\/h2>\n

    Kuten aiemmin mainitsimme, React-n\u00e4pp\u00e4imet<\/strong> pit\u00e4isi olla vakaa ja ainutlaatuinen. Helpoin tapa saavuttaa t\u00e4m\u00e4 on k\u00e4ytt\u00e4\u00e4 yksil\u00f6llist\u00e4 ID:t\u00e4 (esimerkiksi tietokannasta) ja antaa se jokaiselle elementille, kun kartoitetaan matriisia, helppoa. Mutta ent\u00e4 tilanteet, joissa meill\u00e4 ei ole ID:t\u00e4, nime\u00e4 tai muita yksil\u00f6llisi\u00e4 tunnisteita, jotka voisimme siirt\u00e4\u00e4 kullekin elementille? No, jos emme v\u00e4lit\u00e4 mit\u00e4\u00e4n avaimena, React<\/strong> ottaa oletusarvoisesti nykyisen array-indeksin (koska se on ainutkertainen tuon listan sis\u00e4ll\u00e4) k\u00e4sitell\u00e4kseen sit\u00e4 varten us<\/a>, mutta se antaa my\u00f6s mukavan virheilmoituksen konsoliin:<\/p>\n

    \"\"<\/p>\n

    Miksi n\u00e4in on? Vastaus on se, ett\u00e4 array-indeksi ei ole vakaa. Jos elementtien j\u00e4rjestys muuttuu, jokainen avain muuttuu ja meill\u00e4 on ongelma. Jos React<\/strong> kohtaa tilanteen, jossa elementtien luettelon j\u00e4rjestyst\u00e4 on muutettu, se yritt\u00e4\u00e4 edelleen verrata niit\u00e4 avainten perusteella, mik\u00e4 tarkoittaa, ett\u00e4 jokainen vertailu p\u00e4\u00e4ttyy komponentin uudelleenrakentamiseen, mink\u00e4 seurauksena koko luettelo rakennetaan uudelleen tyhj\u00e4st\u00e4. T\u00e4m\u00e4n lis\u00e4ksi voimme t\u00f6rm\u00e4t\u00e4 joihinkin odottamattomiin ongelmiin, kuten komponenttien tilan p\u00e4ivityksiin elementeille, kuten hallitsemattomiin sy\u00f6tteisiin, ja muihin maagisiin vaikeasti debugattaviin ongelmiin.<\/p>\n

    Poikkeukset<\/h2>\n

    Palataan takaisin array-indeksiin. Jos sit\u00e4 k\u00e4ytet\u00e4\u00e4n React avain<\/strong> voi olla niin ongelmallista, miksi React<\/strong> k\u00e4ytt\u00e4\u00e4 sit\u00e4 oletusarvoisesti? Onko olemassa k\u00e4ytt\u00f6tapauksia, joissa se on ok tehd\u00e4 niin? Vastaus on kyll\u00e4, k\u00e4ytt\u00f6tapaus on staattiset luettelot. Jos olet varma, ett\u00e4 render\u00f6im\u00e4si listan j\u00e4rjestys ei koskaan muutu, on turvallista k\u00e4ytt\u00e4\u00e4 array-indeksi\u00e4, mutta muista, ett\u00e4 jos sinulla on yksil\u00f6llisi\u00e4 tunnisteita, on silti parempi k\u00e4ytt\u00e4\u00e4 niit\u00e4. Voit my\u00f6s huomata, ett\u00e4 indeksien antaminen avaimina tekee tiedostosta React<\/strong> virheilmoitus katoaa ja samalla jotkut ulkoiset linerit n\u00e4ytt\u00e4v\u00e4t virheilmoituksen tai varoituksen. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 indeksien nimenomaista k\u00e4ytt\u00f6\u00e4 avaimina pidet\u00e4\u00e4n huonona k\u00e4yt\u00e4nt\u00f6n\u00e4, ja jotkin linterit saattavat pit\u00e4\u00e4 sit\u00e4 virheen\u00e4. React<\/strong> itse pit\u00e4\u00e4 sit\u00e4 \"kehitt\u00e4j\u00e4t tiet\u00e4v\u00e4t, mit\u00e4 he tekev\u00e4t\" -tilanteena - joten \u00e4l\u00e4 tee sit\u00e4, ellet todella tied\u00e4, mit\u00e4 teet. Muutama esimerkki siit\u00e4, milloin t\u00e4m\u00e4n poikkeuksen k\u00e4ytt\u00e4minen voi olla ok, olisi pudotusvalikko, jossa on staattinen luettelo painikkeista, tai luettelon n\u00e4ytt\u00e4minen elementeist\u00e4, joissa on yrityksesi osoitetiedot.<\/p>\n

    Vaihtoehto tietokokonaisuuteen perustuvalle avaimelle<\/h2>\n

    Oletetaan, ett\u00e4 mik\u00e4\u00e4n edell\u00e4 mainituista ei ole meille vaihtoehto. Meid\u00e4n on esimerkiksi n\u00e4ytett\u00e4v\u00e4 merkkijonom\u00e4\u00e4ritykseen perustuva elementtiluettelo, joka voidaan monistaa, mutta se voidaan my\u00f6s j\u00e4rjest\u00e4\u00e4 uudelleen. T\u00e4ss\u00e4 tapauksessa emme voi k\u00e4ytt\u00e4\u00e4 mit\u00e4\u00e4n merkkijonoja, koska ne eiv\u00e4t ole yksik\u00e4sitteisi\u00e4 (t\u00e4m\u00e4 voi aiheuttaa my\u00f6s joitakin maagisia virheit\u00e4), eik\u00e4 array-indeksi ole tarpeeksi hyv\u00e4, koska muutamme elementtien j\u00e4rjestyst\u00e4. Viimeinen asia, johon voimme luottaa t\u00e4llaisissa tilanteissa, on joidenkin ulkoisten tunnisteiden k\u00e4ytt\u00f6. Muista, ett\u00e4 sen on oltava vakaa, joten emme voi vain k\u00e4ytt\u00e4\u00e4 Math.random() -ohjelmaa. On olemassa joitakin NPM-paketteja, joita voimme k\u00e4ytt\u00e4\u00e4 t\u00e4llaisissa tapauksissa, esimerkiksi \"uuid\"<\/a> paketti. T\u00e4llaiset ty\u00f6kalut auttavat meit\u00e4 pit\u00e4m\u00e4\u00e4n listan avaimet vakaina ja ainutlaatuisina, vaikka emme l\u00f6yt\u00e4isik\u00e4\u00e4n asianmukaisia tunnisteita omasta luettelostamme. tiedot<\/a> asetettu. Meid\u00e4n pit\u00e4isi harkita tietokannan ID:n ja array-indeksin k\u00e4ytt\u00f6\u00e4 (jos mahdollista) ensin, jotta minimoimme k\u00e4ytt\u00e4miemme pakettien m\u00e4\u00e4r\u00e4n. projekti<\/a>.<\/p>\n

    Lopuksi<\/h2>\n