Cum să utilizați tastele de reacție pentru a evita conflictul dintre componente

Abordarea React poate fi destul de complicată și s-ar putea să întâlniți un comportament neașteptat sau chiar erori subtile. A scăpa de astfel de bug-uri poate fi destul de greu dacă nu ești familiarizat cu cauza lor.

O anumită eroare apare atunci când redați condiționat aceeași componentă cu proprietăți diferite. Explorați acest bug în detaliu și aflați cum să utilizați tastele React pentru a o rezolva.

Componentele React nu sunt întotdeauna independente

Sintaxa sa simplă este unul dintre motivele principale ar trebui să înveți React. Dar, în ciuda multor avantaje, cadrul nu este lipsit de erori.

Bug-ul despre care veți afla aici apare atunci când redați în mod condiționat aceeași componentă, dar îi transmiteți elemente de recuzită diferite.

În astfel de cazuri, React va presupune că cele două componente sunt aceleași, așa că nu se va deranja să redea a doua componentă. Ca rezultat, orice stare pe care o definiți în prima componentă va persista între randări.

Pentru a demonstra, luați acest exemplu. În primul rând, aveți următoarele Tejghea componenta:

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

Acest Tejghea componenta acceptă a Nume de la părinte prin destructurarea obiectelor, care este o modalitate de a utilizați recuzită în React. Apoi redă numele în a. De asemenea, returnează două butoane: unul pentru a reduce numara în stare iar celălalt să-l crească.

Rețineți că nu este nimic în neregulă cu codul de mai sus. Bug-ul provine din următorul bloc de cod (componenta App), care utilizează contorul:

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

În mod implicit, codul de mai sus redă contorul numit Kingsley. Dacă creșteți contorul la cinci și faceți clic pe Schimbați butonul, va reda al doilea contor numit Sally.

Dar problema este că contorul nu se va reseta la starea implicită de zero după ce le-ați schimbat.

Această eroare apare deoarece ambele stări redau aceleași elemente în aceeași ordine. React nu știe că contorul „Kingsley” este diferit de contorul „Sally”. Singura diferență este în Nume prop dar, din păcate, React nu folosește asta pentru a diferenția elementele.

Puteți rezolva această problemă în două moduri. Primul este prin schimbarea DOM-ului și făcând cei doi arbori diferiți. Acest lucru necesită să înțelegeți ce este DOM-ul. De exemplu, puteți înfășura primul contor în interiorul a element și al doilea în interiorul 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>
 )
}

Dacă măriți contorul „Kingsley” și faceți clic Schimbați, starea se resetează la 0. Din nou, acest lucru se întâmplă deoarece structura celor doi arbori DOM este diferită.

Cand este Kingsley variabila este Adevărat, structura va fi div >div > Tejghea (un div care conține un div, care conține un contor). Când schimbați starea contorului folosind butonul, structura devine div > secțiune > Tejghea. Din cauza acestei discrepanțe, React va reda automat un nou contor cu o stare de resetare.

Este posibil să nu doriți întotdeauna să modificați structura marcajului dvs. astfel. A doua modalitate de a rezolva această eroare evită necesitatea unui marcaj diferit.

Utilizarea tastelor pentru a reda o componentă nouă

Tastele permit React să facă diferența între elemente în timpul procesului de randare. Deci, dacă aveți două elemente care sunt exact aceleași și doriți să semnalați lui React că unul este diferit de celălalt, trebuie să setați un atribut cheie unic pentru fiecare element.

Adăugați o cheie la fiecare contor, astfel:

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

Acum, când creșteți contorul „Kingsley” și faceți clic Schimbați, React redă un contor nou și resetează starea la zero.

De asemenea, ar trebui să utilizați tastele atunci când redați o serie de articole de același tip, deoarece React nu va cunoaște diferența dintre fiecare element.

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


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

Când atribuiți chei, React va asocia un numărător separat fiecărui element. În acest fel, poate reflecta orice modificări pe care le faceți matricei.

Un alt caz de utilizare a cheii avansate

De asemenea, puteți utiliza taste pentru a asocia un element cu un alt element. De exemplu, este posibil să doriți să asociați un element de intrare cu elemente diferite în funcție de valoarea unei variabile de stare.

Pentru a demonstra, modificați componenta aplicației:

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

Acum, de fiecare dată când schimbați între elemente pentru Kingsley și Sally, modificați automat atributul cheie al intrării dvs. între „Kingsley” și „Sally”. Acest lucru va forța React să redea complet elementul de intrare cu fiecare clic pe buton.

Mai multe sfaturi pentru optimizarea aplicațiilor React

Optimizarea codului este cheia pentru crearea unei experiențe de utilizator plăcute în aplicația dvs. web sau mobilă. Cunoașterea diferitelor tehnici de optimizare vă poate ajuta să profitați la maximum de aplicațiile dvs. React.

Cea mai bună parte este că puteți aplica majoritatea acestor tehnici de optimizare și cu aplicațiile React Native.