Kako koristiti React tipke za izbjegavanje sukoba komponenti

Pristup Reacta može biti prilično kompliciran i mogli biste naići na neočekivano ponašanje ili čak suptilne greške. Riješiti se takvih grešaka može biti prilično teško ako niste upoznati s njihovim uzrokom.

Posebna pogreška nastaje kada uvjetno prikazujete istu komponentu s različitim svojstvima. Detaljno istražite ovaj bug i saznajte kako koristiti React tipke za njegovo rješavanje.

Komponente Reacta nisu uvijek neovisne

Njegova jednostavna sintaksa jedan je od glavnih razloga trebali biste naučiti React. No, unatoč mnogim prednostima, okvir nije bez grešaka.

Greška o kojoj ćete ovdje saznati pojavljuje se kada uvjetno renderirate istu komponentu, ali joj prosljeđujete različite propise.

U ovakvim slučajevima, React će pretpostaviti da su dvije komponente iste, pa se neće truditi renderirati drugu komponentu. Kao rezultat toga, bilo koje stanje koje definirate u prvoj komponenti postojat će između renderiranja.

Za demonstraciju, uzmite ovaj primjer. Prvo, imate sljedeće Brojač 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>
 )
}

Ovaj Brojač komponenta prihvaća a Ime od roditelja putem destrukturiranja objekta, što je način da se koristiti rekvizite u Reactu. Zatim prikazuje ime u a. Također vraća dva gumba: jedan za smanjenje računati u stanju, a drugi da ga poveća.

Imajte na umu da nema ničeg lošeg u gornjem kodu. Greška dolazi iz sljedećeg bloka koda (komponenta aplikacije), koji koristi brojač:

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

Prema zadanim postavkama, gornji kod prikazuje brojač pod imenom Kingsley. Ako povećate brojač na pet i kliknete na Zamjena gumb, prikazat će drugi brojač pod imenom Sally.

Ali problem je u tome što se brojač neće vratiti na zadano stanje nule nakon što ih zamijenite.

Do ove pogreške dolazi jer oba stanja prikazuju iste elemente istim redoslijedom. React ne zna da se brojač "Kingsley" razlikuje od brojača "Sally". Jedina razlika je u Ime prop ali, nažalost, React to ne koristi za razlikovanje elemenata.

Ovaj problem možete riješiti na dva načina. Prvi je mijenjanjem vašeg DOM-a i razlikovanjem dva stabla. Ovo zahtijeva da razumijete što je DOM. Na primjer, možete zamotati prvi brojač unutar a element, a drugi unutar 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>
 )
}

Ako povećate brojač "Kingsley" i kliknete Zamjena, stanje se vraća na 0. Opet, to se događa jer je struktura dvaju DOM stabala različita.

Kada je Kingsley varijabla je pravi, struktura će biti div >div > Brojač (div koji sadrži div, koji sadrži brojač). Kada promijenite stanje brojača pomoću gumba, struktura postaje div > odjeljak > Brojač. Zbog ove razlike, React će automatski renderirati svježi brojač sa stanjem resetiranja.

Možda nećete uvijek htjeti ovako mijenjati strukturu svoje oznake. Drugi način rješavanja ove pogreške izbjegava potrebu za drugačijim oznakama.

Korištenje tipki za renderiranje nove komponente

Tipke omogućuju Reactu da razlikuje elemente tijekom procesa renderiranja. Dakle, ako imate dva potpuno ista elementa i želite signalizirati Reactu da se jedan razlikuje od drugog, trebate postaviti jedinstveni atribut ključa na svaki element.

Dodajte ključ svakom brojaču, ovako:

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

Sada, kada povećate brojač "Kingsley" i kliknete Zamjena, React renderira novi brojač i vraća stanje na nulu.

Također biste trebali koristiti ključeve kada renderirate niz stavki iste vrste, budući da React neće znati razliku između svake stavke.

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


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

Kada dodijelite ključeve, React će pridružiti poseban brojač svakoj stavci. Na taj način može odražavati sve promjene koje napravite u nizu.

Još jedan napredni slučaj korištenja ključa

Također možete koristiti ključeve za povezivanje elementa s drugim elementom. Na primjer, možda želite pridružiti ulazni element različitim elementima ovisno o vrijednosti varijable stanja.

Za demonstraciju, prilagodite komponentu 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>
 )
}

Sada, svaki put kada mijenjate između elemenata za Kingsley i Sally, automatski mijenjate svoj ključni atribut unosa između "Kingsley" i "Sally". Ovo će prisiliti React da u potpunosti ponovno renderira ulazni element sa svakim pritiskom na gumb.

Više savjeta za optimizaciju React aplikacija

Optimizacija koda ključna je za stvaranje ugodnog korisničkog iskustva u vašoj web ili mobilnoj aplikaciji. Poznavanje različitih tehnika optimizacije može vam pomoći da izvučete najviše iz svojih React aplikacija.

Najbolji dio je što većinu ovih tehnika optimizacije možete primijeniti i s React Native aplikacijama.