Come utilizzare i tasti React per evitare conflitti tra componenti

L'approccio React può essere piuttosto complicato e potresti riscontrare comportamenti imprevisti o persino bug sottili. Sbarazzarsi di tali bug può essere piuttosto difficile se non si ha familiarità con la loro causa.

Un bug particolare si verifica quando si esegue il rendering condizionale dello stesso componente con proprietà diverse. Esplora questo bug in dettaglio e scopri come utilizzare i tasti React per risolverlo.

I componenti di React non sono sempre indipendenti

La sua sintassi semplice è uno dei motivi principali dovresti imparare a reagire. Ma, nonostante molti vantaggi, il framework non è privo di bug.

Il bug che imparerai qui si verifica quando esegui il rendering condizionale dello stesso componente, ma gli passi oggetti di scena diversi.

In casi come questo, React presumerà che i due componenti siano gli stessi, quindi non si preoccuperà di rendere il secondo componente. Di conseguenza, qualsiasi stato definito nel primo componente persisterà tra i rendering.

Per dimostrare, prendi questo esempio. Innanzitutto, hai quanto segue Contatore componente:

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

Questo Contatore componente accetta a nome dal genitore tramite la destrutturazione dell'oggetto, che è un modo per farlo usa oggetti di scena in React. Quindi rende il nome in a. Restituisce anche due pulsanti: uno per decrementare il contare nello stato e l'altro per incrementarlo.

Tieni presente che non c'è niente di sbagliato nel codice sopra. Il bug proviene dal seguente blocco di codice (il componente App), che utilizza il contatore:

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

Per impostazione predefinita, il codice precedente esegue il rendering del contatore denominato Kingsley. Se si incrementa il contatore a cinque e si fa clic su Scambio pulsante, renderà il secondo contatore chiamato Sally.

Ma il problema è che il contatore non si ripristinerà al suo stato predefinito di zero dopo che li hai scambiati.

Questo errore si verifica perché entrambi gli stati eseguono il rendering degli stessi elementi nello stesso ordine. React non sa che il contatore "Kingsley" è diverso dal contatore "Sally". L'unica differenza è nel nome prop ma, sfortunatamente, React non lo usa per differenziare gli elementi.

Puoi aggirare questo problema in due modi. Il primo è modificare il DOM e rendere diversi i due alberi. Ciò richiede che tu capisca cos'è il DOM. Ad esempio, puoi avvolgere il primo contatore all'interno di a elemento e il secondo all'interno di a elemento:

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

Se incrementi il ​​contatore "Kingsley" e fai clic Scambio, lo stato si reimposta su 0. Ancora una volta, questo accade perché la struttura dei due alberi DOM è diversa.

Quando il è Kingsley variabile è VERO, la struttura sarà div >div > Contatore (un div contenente un div, contenente un contatore). Quando si scambia lo stato del contatore utilizzando il pulsante, la struttura diventa div > sezione > Contatore. A causa di questa discrepanza, React eseguirà automaticamente il rendering di un nuovo contatore con uno stato di ripristino.

Potresti non voler sempre modificare la struttura del tuo markup in questo modo. Il secondo modo per risolvere questo bug evita la necessità di markup diversi.

Utilizzo delle chiavi per il rendering di un nuovo componente

Le chiavi consentono a React di differenziare gli elementi durante il processo di rendering. Quindi, se hai due elementi che sono esattamente uguali e vuoi segnalare a React che uno è diverso dall'altro, devi impostare un attributo chiave univoco su ciascun elemento.

Aggiungi una chiave a ciascun contatore, in questo modo:

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

Ora, quando incrementi il ​​contatore "Kingsley" e fai clic Scambio, React esegue il rendering di un nuovo contatore e azzera lo stato.

Dovresti anche usare le chiavi quando esegui il rendering di un array di elementi dello stesso tipo, poiché React non conoscerà la differenza tra ciascun elemento.

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


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

Quando assegni le chiavi, React assocerà un contatore separato a ciascun elemento. In questo modo, può riflettere qualsiasi modifica apportata all'array.

Un altro caso d'uso chiave avanzato

Puoi anche usare le chiavi per associare un elemento con un altro elemento. Ad esempio, potresti voler associare un elemento di input a elementi diversi a seconda del valore di una variabile di stato.

Per dimostrarlo, modifica il componente App:

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

Ora, ogni volta che si passa da un file elementi per Kingsley e Sally, cambierai automaticamente l'attributo chiave del tuo input tra "Kingsley" e "Sally". Ciò costringerà React a ri-renderizzare completamente l'elemento di input ad ogni clic del pulsante.

Altri suggerimenti per l'ottimizzazione delle applicazioni React

L'ottimizzazione del codice è la chiave per creare un'esperienza utente piacevole nella tua app Web o mobile. Conoscere diverse tecniche di ottimizzazione può aiutarti a ottenere il massimo dalle tue applicazioni React.

La parte migliore è che puoi applicare la maggior parte di queste tecniche di ottimizzazione anche con le applicazioni React Native.