Kaip naudoti „React“ klavišus, kad išvengtumėte komponentų konflikto

„React“ metodas gali būti gana sudėtingas ir galite susidurti su netikėtu elgesiu ar net subtiliomis klaidomis. Atsikratyti tokių klaidų gali būti gana sunku, jei nesate susipažinę su jų priežastimi.

Tam tikra klaida atsiranda, kai sąlyginai pateikiate tą patį komponentą su skirtingomis savybėmis. Išsamiai ištirkite šią klaidą ir sužinokite, kaip ją išspręsti naudojant React klavišus.

„React“ komponentai ne visada yra nepriklausomi

Jo paprasta sintaksė yra viena iš pagrindinių priežasčių turėtum išmokti Reaguoti. Tačiau, nepaisant daugelio privalumų, sistema nėra be klaidų.

Klaida, apie kurią sužinosite čia, atsiranda, kai sąlyginai pateikiate tą patį komponentą, bet perduodate jam skirtingus rekvizitus.

Tokiais atvejais „React“ darys prielaidą, kad abu komponentai yra vienodi, todėl netrukdys pateikti antrojo komponento. Dėl to bet kokia būsena, kurią apibrėžiate pirmajame komponente, išliks tarp pateikimų.

Norėdami parodyti, paimkite šį pavyzdį. Pirma, jūs turite šiuos dalykus Skaitliukas komponentas:

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

Tai Skaitliukas komponentas priima a vardas iš tėvų per objekto sunaikinimą, o tai yra būdas naudokite rekvizitus React. Tada jis pateikia pavadinimą a. Jis taip pat grąžina du mygtukus: vieną sumažina skaičiuoti būsenoje, o kita – ją padidinti.

Atminkite, kad aukščiau pateiktame kode nėra nieko blogo. Klaida kyla iš šio kodo bloko (programos komponento), kuris naudoja skaitiklį:

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

Pagal numatytuosius nustatymus aukščiau pateiktas kodas pateikia skaitiklį pavadinimu Kingsley. Jei padidinsite skaitiklį iki penkių ir spustelėkite Sukeisti mygtuką, jis pateiks antrąjį skaitiklį, pavadintą Sally.

Tačiau problema yra ta, kad skaitiklis nebus iš naujo nustatytas į nulinę būseną, kai juos sukeisite.

Ši klaida atsiranda todėl, kad abi būsenos pateikia tuos pačius elementus ta pačia tvarka. „React“ nežino, kad „Kingsley“ skaitiklis skiriasi nuo „Sally“ skaitiklio. Vienintelis skirtumas yra tame vardas rekvizitas, bet, deja, „React“ to nenaudoja elementams atskirti.

Šią problemą galite išspręsti dviem būdais. Pirmasis yra pakeisti savo DOM ir padaryti du medžius skirtingus. Tam reikia suprasti kas yra DOM. Pavyzdžiui, pirmąjį skaitiklį galite apvynioti a viduje elementas ir antrasis a viduje elementas:

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

Jei padidinsite „Kingsley“ skaitiklį ir spustelėkite Sukeisti, būsena iš naujo nustatoma į 0. Vėlgi, taip atsitinka todėl, kad dviejų DOM medžių struktūra skiriasi.

Kai yra Kingslis kintamasis yra tiesa, struktūra bus div >div > Skaitliukas (div, kuriame yra div, kuriame yra skaitiklis). Kai sukeičiate skaitiklio būseną naudodami mygtuką, struktūra tampa div > skyrius > Skaitliukas. Dėl šio neatitikimo „React“ automatiškai pateiks naują skaitiklį su iš naujo nustatyta būsena.

Galbūt ne visada norėsite taip pakeisti savo žymėjimo struktūrą. Antrasis šios klaidos sprendimo būdas leidžia išvengti skirtingo žymėjimo.

Raktų naudojimas naujam komponentui pateikti

Klavišai leidžia „React“ atskirti elementus pateikimo proceso metu. Taigi, jei turite du visiškai vienodus elementus ir norite signalizuoti React, kad vienas skiriasi nuo kito, kiekvienam elementui turite nustatyti unikalų rakto atributą.

Prie kiekvieno skaitiklio pridėkite raktą, pavyzdžiui:

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

Dabar, kai padidinsite „Kingsley“ skaitiklį ir spustelėkite Sukeisti, React pateikia naują skaitiklį ir iš naujo nustato būseną į nulį.

Taip pat turėtumėte naudoti raktus, kai pateikiate to paties tipo elementų masyvą, nes „React“ nežinos skirtumo tarp kiekvieno elemento.

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


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

Kai priskirsite raktus, „React“ su kiekvienu elementu susies atskirą skaitiklį. Tokiu būdu jis gali atspindėti visus jūsų atliktus masyvo pakeitimus.

Kitas išplėstinio rakto naudojimo atvejis

Taip pat galite naudoti klavišus, kad susietumėte elementą su kitu elementu. Pavyzdžiui, galbūt norėsite susieti įvesties elementą su skirtingais elementais, atsižvelgiant į būsenos kintamojo reikšmę.

Norėdami parodyti, pakoreguokite programos komponentą:

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

Dabar kiekvieną kartą, kai keičiate elementų, skirtų Kingsley ir Sally, automatiškai pakeičiate įvesties pagrindinį atributą tarp „Kingsley“ ir „Sally“. Tai privers React visiškai iš naujo pateikti įvesties elementą su kiekvienu mygtuko paspaudimu.

Daugiau patarimų, kaip optimizuoti „React“ programas

Kodo optimizavimas yra labai svarbus norint sukurti malonią žiniatinklio ar mobiliosios programos naudotojo patirtį. Žinodami apie skirtingus optimizavimo būdus, galite išnaudoti visas „React“ programų galimybes.

Geriausia tai, kad daugumą šių optimizavimo metodų galite pritaikyti ir naudodami „React Native“ programas.