Reageerimisklahvide kasutamine komponentide konflikti vältimiseks

Reacti lähenemine võib olla üsna keeruline ja võite kohata ootamatut käitumist või isegi peeneid vigu. Sellistest vigadest vabanemine võib olla üsna raske, kui te pole nende põhjusega kursis.

Konkreetne viga tekib siis, kui renderdate tingimuslikult sama komponendi erinevate omadustega. Uurige seda viga üksikasjalikult ja uurige, kuidas selle lahendamiseks Reacti klahve kasutada.

Reaktsiooni komponendid ei ole alati sõltumatud

Selle otsene süntaks on üks peamisi põhjuseid sa peaksid õppima reageerima. Kuid vaatamata paljudele eelistele pole raamistik vigadeta.

Viga, mille kohta siit teada saad, ilmneb siis, kui renderdate tingimuslikult sama komponendi, kuid edastate sellele erinevaid rekvisiite.

Sellistel juhtudel eeldab React, et need kaks komponenti on samad, nii et ta ei vaevu teise komponendi renderdamisega. Selle tulemusel säilivad kõik esimeses komponendis määratletud olekud renderdamiste vahel.

Demonstreerimiseks võtke see näide. Esiteks on teil järgmine Loendur komponent:

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

See Loendur komponent aktsepteerib a nimi vanemalt objektide struktureerimise kaudu, mis on viis kasutage Reactis rekvisiite. Seejärel muudab see nime a-s. Samuti tagastab see kaks nuppu: üks nupu vähendamiseks loendama olekus ja teine ​​selle suurendamiseks.

Pidage meeles, et ülaltoodud koodil pole midagi valesti. Viga pärineb järgmisest koodiplokist (rakenduse komponent), mis kasutab loendurit:

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

Vaikimisi muudab ülaltoodud kood loenduri nimeks Kingsley. Kui suurendate loendurit viieni ja klõpsake nuppu Vahetada nuppu, renderdab see teise loenduri nimega Sally.

Kuid probleem on selles, et loendur ei lähtestu pärast nende vahetamist vaikeolekusse null.

See viga ilmneb seetõttu, et mõlemad olekud renderdavad samu elemente samas järjekorras. React ei tea, et "Kingsley" loendur erineb "Sally" loendurist. Ainus erinevus seisneb selles nimi prop, kuid kahjuks ei kasuta React seda elementide eristamiseks.

Saate sellest probleemist mööda minna kahel viisil. Esiteks muutke oma DOM-i ja muutke need kaks puud erinevaks. See eeldab, et sa mõistad mis on DOM. Näiteks võite esimese loenduri mähkida a sisse element ja teine ​​a sees 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>
 )
}

Kui suurendate "Kingsley" loendurit ja klõpsate Vahetada, lähtestatakse olek 0-le. Jällegi juhtub see seetõttu, et kahe DOM-puu struktuur on erinev.

Kui on Kingsley muutuja on tõsi, struktuur saab olema div >div > Loendur (div, mis sisaldab div, sisaldab loendurit). Kui vahetate loenduri olekut nupuga, muutub struktuur div > osa > Loendur. Selle lahknevuse tõttu renderdab React automaatselt uue loenduri lähtestatud olekuga.

Te ei pruugi alati soovida oma märgistuse struktuuri niimoodi muuta. Teine viis selle vea lahendamiseks väldib vajadust erineva märgistuse järele.

Klahvide kasutamine värske komponendi renderdamiseks

Klahvid võimaldavad Reactil renderdamisprotsessi ajal elemente eristada. Nii et kui teil on kaks täpselt samasugust elementi ja soovite Reactile anda märku, et üks erineb teisest, peate igale elemendile määrama ainulaadse võtmeatribuudi.

Lisage igale loendurile võti, näiteks järgmiselt:

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

Nüüd, kui suurendate "Kingsley" loendurit ja klõpsate Vahetada, React renderdab uue loenduri ja lähtestab oleku nulli.

Peaksite kasutama ka võtmeid, kui renderdate sama tüüpi üksuste massiivi, kuna React ei tea iga üksuse erinevust.

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


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

Võtmete määramisel seostab React iga üksusega eraldi loenduri. Nii võib see kajastada kõiki massiivi muudatusi.

Veel üks täiustatud võtme kasutamise juhtum

Elemendi seostamiseks teise elemendiga saate kasutada ka klahve. Näiteks võite soovida seostada sisendelemendi erinevate elementidega, olenevalt olekumuutuja väärtusest.

Demonstreerimiseks kohandage rakenduse komponenti.

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

Nüüd, iga kord, kui vahetate Kingsley ja Sally elemendid, muudate automaatselt oma sisendi võtmeatribuuti "Kingsley" ja "Sally" vahel. See sunnib Reacti iga nupuvajutusega sisendelemendi täielikult uuesti renderdama.

Veel näpunäiteid React-rakenduste optimeerimiseks

Koodi optimeerimine on teie veebi- või mobiilirakenduses meeldiva kasutuskogemuse loomise võtmeks. Erinevate optimeerimistehnikate tundmine aitab teil oma Reacti rakendustest maksimumi võtta.

Parim osa on see, et saate enamikku neist optimeerimistehnikatest rakendada ka React Native'i rakendustega.