Kā izmantot reaģēšanas taustiņus, lai izvairītos no komponentu konflikta

React pieeja var būt diezgan sarežģīta, un jūs varat saskarties ar negaidītu uzvedību vai pat smalkām kļūdām. Atbrīvoties no šādām kļūdām var būt diezgan grūti, ja neesat pazīstams ar to cēloni.

Konkrēta kļūda rodas, ja nosacīti renderējat vienu un to pašu komponentu ar dažādām īpašībām. Detalizēti izpētiet šo kļūdu un uzziniet, kā tās novēršanai izmantot React taustiņus.

React komponenti ne vienmēr ir neatkarīgi

Tās vienkāršā sintakse ir viens no galvenajiem iemesliem jums vajadzētu iemācīties reaģēt. Bet, neskatoties uz daudzajām priekšrocībām, sistēma nav bez kļūdām.

Kļūda, par kuru jūs uzzināsit šeit, rodas, ja nosacīti renderējat vienu un to pašu komponentu, bet nododat tam dažādus rekvizītus.

Šādos gadījumos React pieņems, ka abi komponenti ir vienādi, tāpēc tas netraucēs atveidot otro komponentu. Rezultātā jebkurš stāvoklis, ko definējat pirmajā komponentā, saglabāsies starp renderēšanu.

Lai parādītu, ņemiet šo piemēru. Pirmkārt, jums ir šāda informācija Skaitītājs komponents:

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

Šis Skaitītājs komponents pieņem a nosaukums no vecāka, izmantojot objektu iznīcināšanu, kas ir veids, kā izmantojiet rekvizītus programmā React. Pēc tam tas atveido nosaukumu a. Tas arī atgriež divas pogas: vienu, lai samazinātu skaitīt stāvoklī un otru, lai to palielinātu.

Ņemiet vērā, ka iepriekš minētajam kodam nav nekā slikta. Kļūda nāk no šāda koda bloka (lietotnes komponents), kas izmanto skaitītāju:

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

Pēc noklusējuma iepriekš minētais kods atveido skaitītāju ar nosaukumu Kingsley. Ja palielināsiet skaitītāju līdz pieciem un noklikšķiniet uz Apmainīt pogu, tas atveidos otro skaitītāju ar nosaukumu Sally.

Bet problēma ir tā, ka skaitītājs netiks atiestatīts uz noklusējuma nulles stāvokli pēc to nomaiņas.

Šī kļūda rodas tāpēc, ka abi stāvokļi atveido vienus un tos pašus elementus vienā secībā. React nezina, ka "Kingsley" skaitītājs atšķiras no "Sally" skaitītāja. Vienīgā atšķirība ir tajā nosaukums prop, bet diemžēl React neizmanto to, lai atšķirtu elementus.

Šo problēmu var apiet divos veidos. Pirmkārt, mainot savu DOM un padarot divus kokus atšķirīgus. Tas prasa, lai jūs saprastu kas ir DOM. Piemēram, jūs varat ietīt pirmo skaitītāju iekšpusē a elements un otrs iekšā a elements:

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

Ja palielināsit "Kingsley" skaitītāju un noklikšķiniet Apmainīt, stāvoklis tiek atiestatīts uz 0. Atkal, tas notiek tāpēc, ka divu DOM koku struktūra ir atšķirīga.

Kad ir Kingslijs mainīgais ir taisnība, struktūra būs div >div > Skaitītājs (div, kas satur div, satur skaitītāju). Ja maināt skaitītāja stāvokli, izmantojot pogu, struktūra kļūst div > sadaļā > Skaitītājs. Šīs neatbilstības dēļ React automātiski atveidos jaunu skaitītāju ar atiestatīšanas stāvokli.

Jūs ne vienmēr vēlaties mainīt sava marķējuma struktūru šādi. Otrs šīs kļūdas novēršanas veids ļauj izvairīties no nepieciešamības pēc atšķirīga marķējuma.

Taustiņu izmantošana svaiga komponenta renderēšanai

Taustiņi ļauj React renderēšanas procesa laikā atšķirt elementus. Tātad, ja jums ir divi elementi, kas ir pilnīgi vienādi, un vēlaties signalizēt React, ka viens no otra atšķiras, katram elementam ir jāiestata unikāls atslēgas atribūts.

Pievienojiet atslēgu katram skaitītājam, piemēram:

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

Tagad, kad palielināsit "Kingsley" skaitītāju un noklikšķiniet Apmainīt, React atveido jaunu skaitītāju un atiestata stāvokli uz nulli.

Atslēgas ir jāizmanto arī tad, kad renderējat viena veida vienumu masīvu, jo React nezinās atšķirību starp katru vienumu.

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


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

Piešķirot atslēgas, React ar katru vienumu saistīs atsevišķu skaitītāju. Tādā veidā tas var atspoguļot visas izmaiņas, ko veicat masīvā.

Vēl viens uzlabotas atslēgas lietošanas gadījums

Varat arī izmantot taustiņus, lai saistītu elementu ar citu elementu. Piemēram, iespējams, vēlēsities saistīt ievades elementu ar dažādiem elementiem atkarībā no stāvokļa mainīgā vērtības.

Lai demonstrētu, pielāgojiet lietotnes komponentu:

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

Tagad katru reizi, kad veicat maiņu starp elementi Kingsley un Sally, jūs automātiski maināt ievades galveno atribūtu starp "Kingsley" un "Sally". Tas piespiedīs React pilnībā atkārtoti renderēt ievades elementu ar katru pogas klikšķi.

Vairāk padomu React lietojumprogrammu optimizēšanai

Koda optimizācija ir svarīga, lai radītu patīkamu lietotāja pieredzi jūsu tīmekļa vai mobilajā lietotnē. Zinot dažādus optimizācijas paņēmienus, varat izmantot visas savas React lietojumprogrammas.

Labākā daļa ir tāda, ka lielāko daļu šo optimizācijas paņēmienu varat izmantot arī ar React Native lietojumprogrammām.