Kako uporabljati tipke React, da se izognete konfliktu komponent

Pristop React je lahko precej zapleten in lahko naletite na nepričakovano vedenje ali celo subtilne napake. Znebiti se takšnih hroščev je lahko precej težko, če niste seznanjeni z njihovim vzrokom.

Posebna napaka se pojavi, ko pogojno upodabljate isto komponento z različnimi lastnostmi. Podrobno raziščite to napako in ugotovite, kako jo rešiti s tipkami React.

Komponente Reacta niso vedno neodvisne

Njegova enostavna sintaksa je eden glavnih razlogov morali bi se naučiti React. Toda kljub številnim prednostim okvir ni brez napak.

Napaka, o kateri boste izvedeli tukaj, se pojavi, ko pogojno upodabljate isto komponento, vendar ji posredujete različne rekvizite.

V takih primerih bo React domneval, da sta obe komponenti enaki, zato se ne bo trudil upodabljati druge komponente. Posledično bo vsako stanje, ki ga definirate v prvi komponenti, vztrajalo med upodabljanji.

Za dokaz vzemite ta primer. Prvič, imate naslednje števec komponenta:

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>
 )
}

to števec komponenta sprejme a ime od starša prek destrukturiranja objekta, kar je način za uporabite rekvizite v Reactu. Nato upodobi ime v a. Vrne tudi dva gumba: enega za zmanjšanje štetje v stanju in drugi, da ga poveča.

Ne pozabite, da z zgornjo kodo ni nič narobe. Napaka izvira iz naslednjega bloka kode (komponenta aplikacije), ki uporablja števec:

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>
 )
}

Zgornja koda privzeto upodobi števec z imenom Kingsley. Če števec povečate na pet in kliknete Zamenjaj bo upodobil drugi števec z imenom Sally.

Toda težava je v tem, da se števec po zamenjavi ne bo ponastavil na privzeto stanje nič.

Do te napake pride, ker obe državi upodabljata iste elemente v istem vrstnem redu. React ne ve, da se števec "Kingsley" razlikuje od števca "Sally". Edina razlika je v ime prop, vendar na žalost React tega ne uporablja za razlikovanje elementov.

To težavo lahko rešite na dva načina. Prvi je tako, da spremenite svoj DOM in naredite obe drevesi različni. To zahteva, da razumete kaj je DOM. Na primer, prvi števec lahko zavijete znotraj a element in drugi znotraj a element:

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>
 )
}

Če povečate števec "Kingsley" in kliknete Zamenjaj, se stanje ponastavi na 0. Ponovno se to zgodi, ker je struktura dveh dreves DOM različna.

Ko je Kingsley spremenljivka je prav, struktura bo div >div > števec (div, ki vsebuje div, ki vsebuje števec). Ko z gumbom zamenjate stanje števca, struktura postane div > razdelek > števec. Zaradi tega neskladja bo React samodejno upodobil nov števec s ponastavljenim stanjem.

Morda ne boste želeli vedno tako spremeniti strukture vaše oznake. Drugi način reševanja te napake se izogne ​​potrebi po drugačnih oznakah.

Uporaba tipk za upodabljanje nove komponente

Tipke omogočajo Reactu razlikovanje med elementi med postopkom upodabljanja. Torej, če imate dva elementa, ki sta popolnoma enaka, in želite sporočiti Reactu, da se eden razlikuje od drugega, morate za vsak element nastaviti edinstven atribut ključa.

Vsakemu števcu dodajte ključ, kot je ta:

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>
 )
}

Zdaj, ko povečate števec "Kingsley" in kliknete Zamenjaj, React upodobi nov števec in ponastavi stanje na nič.

Ključe morate uporabiti tudi, ko upodabljate matriko elementov iste vrste, saj React ne bo poznal razlike med vsakim elementom.

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


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

Ko dodelite ključe, bo React z vsakim elementom povezal ločen števec. Tako lahko odraža vse spremembe, ki jih naredite v matriki.

Še en napreden primer uporabe ključa

Uporabite lahko tudi tipke za povezavo elementa z drugim elementom. Na primer, morda želite povezati vhodni element z različnimi elementi, odvisno od vrednosti spremenljivke stanja.

Za predstavitev prilagodite komponento aplikacije:

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>
 )
}

Zdaj vsakič, ko zamenjate med elementov za Kingsley in Sally, samodejno spremenite ključni atribut vašega vnosa med "Kingsley" in "Sally". To bo prisililo React, da v celoti ponovno upodobi vhodni element z vsakim klikom gumba.

Več nasvetov za optimizacijo aplikacij React

Optimizacija kode je ključna za ustvarjanje prijetne uporabniške izkušnje v vaši spletni ali mobilni aplikaciji. Poznavanje različnih tehnik optimizacije vam lahko pomaga kar najbolje izkoristiti svoje aplikacije React.

Najboljši del je, da lahko večino teh optimizacijskih tehnik uporabite tudi z aplikacijami React Native.