Kuinka käyttää React-näppäimiä komponenttiristiriitojen välttämiseksi

React-lähestymistapa voi olla melko monimutkainen, ja saatat kohdata odottamatonta käyttäytymistä tai jopa hienovaraisia ​​​​virheitä. Tällaisista vioista eroon pääseminen voi olla melko vaikeaa, jos et tunne niiden syytä.

Erityinen virhe syntyy, kun ehdollisesti renderöit saman komponentin eri ominaisuuksilla. Tutustu tähän virheeseen yksityiskohtaisesti ja ota selvää, kuinka voit ratkaista sen React-näppäimillä.

React-komponentit eivät aina ole itsenäisiä

Sen suoraviivainen syntaksi on yksi tärkeimmistä syistä sinun pitäisi opetella reagoimaan. Mutta monista eduista huolimatta kehys ei ole vailla virheitä.

Virhe, josta opit tässä, ilmenee, kun hahmonnat ehdollisesti samaa komponenttia, mutta välität sille eri rekvisiitta.

Tällaisissa tapauksissa React olettaa, että nämä kaksi komponenttia ovat samat, joten se ei vaivaudu hahmontamaan toista komponenttia. Tämän seurauksena mikä tahansa ensimmäisessä komponentissa määrittämäsi tila säilyy renderöintien välillä.

Osoita tämä esimerkki. Ensinnäkin sinulla on seuraavat asiat Laskuri komponentti:

import { useState, useEffect } from"react"
exportfunctionCounter({name}) {
const [count, setCount] = useState(0)
return(


{name}</div>
 setCount(c => c - 1)}> - </button>


 setCount(c => c + 1)}> + </button>
 </div>
 )
}

Tämä Laskuri komponentti hyväksyy a nimi vanhemmalta objektien tuhoamisen kautta, mikä on tapa käytä rekvisiittaa Reactissa. Sitten se tekee nimen kirjaimella a. Se palauttaa myös kaksi painiketta: yksi pienentää arvoa Kreivi tilassa ja toinen lisäämään sitä.

Muista, että yllä olevassa koodissa ei ole mitään vikaa. Virhe tulee seuraavasta koodilohkosta (sovelluskomponentti), joka käyttää laskuria:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <Countername="Kingsley" />: <Countername="Sally" /> }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Oletuksena yllä oleva koodi tekee laskurin nimeksi Kingsley. Jos lisäät laskurin viiteen ja napsautat Vaihtaa -painiketta, se näyttää toisen laskurin nimeltä Sally.

Mutta ongelmana on, että laskuri ei nollaudu oletustilaansa, kun olet vaihtanut ne.

Tämä virhe ilmenee, koska molemmat tilat tekevät samat elementit samassa järjestyksessä. React ei tiedä, että "Kingsley"-laskuri on erilainen kuin "Sally"-laskuri. Ainoa ero on siinä nimi prop, mutta valitettavasti React ei käytä sitä elementtien erottamiseen.

Voit kiertää tämän ongelman kahdella tavalla. Ensimmäinen on muuttaa DOM: ia ja tehdä kahdesta puusta erilaiset. Tämä edellyttää, että ymmärrät mikä DOM on. Voit esimerkiksi kääriä ensimmäisen laskurin a: n sisään elementti ja toinen sisällä a elementti:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return (


 { isKingsley? 
 (<div>
"Kingsley" /> 
 </div>)
: 
 (<section>
"Sally" /> 
 </section>)
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Jos lisäät "Kingsley"-laskuria ja napsautat Vaihtaa, tila palautuu nollaan. Jälleen tämä tapahtuu, koska kahden DOM-puun rakenne on erilainen.

Kun on Kingsley muuttuja on totta, rakenne tulee olemaan div >div > Laskuri (div, joka sisältää div, sisältää laskurin). Kun vaihdat laskurin tilan painikkeella, rakenteesta tulee div > osio > Laskuri. Tämän ristiriidan vuoksi React renderöi automaattisesti uuden laskurin, jonka tila on nollattu.

Et välttämättä aina halua muuttaa merkintäsi rakennetta tällä tavalla. Toinen tapa ratkaista tämä virhe välttää erilaisten merkintöjen tarpeen.

Avainten käyttäminen tuoreen komponentin hahmontamiseen

Avaimet antavat Reactille mahdollisuuden erottaa elementit renderöintiprosessin aikana. Joten jos sinulla on kaksi täsmälleen samaa elementtiä ja haluat antaa Reactille signaalin, että toinen eroaa toisesta, sinun on asetettava kullekin elementille yksilöllinen avainattribuutti.

Lisää jokaiseen laskuriin avain seuraavasti:

import { useState } from"react"
import { Counter } from"./Counter"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? 
"Kingsley" name="Kingsley" />: 
"Sally" name="Sally" /> 
 }


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Nyt, kun lisäät "Kingsley"-laskuria ja napsautat Vaihtaa, React tekee uuden laskurin ja nollaa tilan.

Sinun tulee myös käyttää avaimia, kun hahmonnat samantyyppisiä kohteita, koska React ei tiedä eroa kunkin kohteen välillä.

exportdefaultfunctionApp() {
const names = ["Kingsley", "John", "Ahmed"]
return(


 { names.map((name, index) => {
return<Counterkey={index}name={name} />
 })}
 </div>
 )
}

Kun määrität avaimia, React liittää jokaiseen kohteeseen erillisen laskurin. Tällä tavalla se voi heijastaa kaikkia taulukkoon tekemiäsi muutoksia.

Toinen edistynyt avaimen käyttötapaus

Voit myös käyttää näppäimiä liittääksesi elementin toiseen elementtiin. Saatat esimerkiksi haluta liittää syöteelementin eri elementteihin tilamuuttujan arvon mukaan.

Havainnollistaaksesi säädä sovelluskomponenttia:

import { useState } from"react"
exportdefaultfunctionApp() {
const [isKingsley, setIsKingsley] = useState(true)
return(


 { isKingsley? <div>Kingsley's Scorediv>: <div>Sally's scorediv> }
"Kingsley": "Sally" } type="number"/>


 setIsKingsley(k => !k)}> Swap </button>
 </div>
 )
}

Nyt aina kun vaihdat välillä Kingsley- ja Sally-elementtejä, muutat automaattisesti syötteesi avainattribuutin "Kingsley" ja "Sally" välillä. Tämä pakottaa Reactin hahmottamaan syöttöelementin kokonaan uudelleen jokaisella painikkeen napsautuksella.

Lisää vinkkejä React-sovellusten optimointiin

Koodin optimointi on avainasemassa miellyttävän käyttökokemuksen luomisessa verkko- tai mobiilisovelluksessasi. Erilaisten optimointitekniikoiden tunteminen voi auttaa sinua saamaan kaiken irti React-sovelluksistasi.

Parasta on, että voit käyttää useimpia näistä optimointitekniikoista myös React Native -sovelluksissa.