Bileşen Çakışmasını Önlemek için Tepki Tuşlarını Kullanma

React yaklaşımı oldukça karmaşık olabilir ve beklenmedik davranışlarla ve hatta ince hatalarla karşılaşabilirsiniz. Nedenlerine aşina değilseniz, bu tür böceklerden kurtulmak oldukça zor olabilir.

Aynı bileşeni koşullu olarak farklı özelliklerle oluşturduğunuzda belirli bir hata ortaya çıkar. Bu hatayı ayrıntılı olarak keşfedin ve çözmek için React tuşlarını nasıl kullanacağınızı öğrenin.

Tepki Bileşenleri Her Zaman Bağımsız Değildir

Basit sözdizimi ana nedenlerden biridir. React'i öğrenmelisin. Ancak, birçok avantaja rağmen, çerçeve hatasız değildir.

Burada öğreneceğiniz hata, koşullu olarak aynı bileşeni oluştururken, ancak onu farklı donanımlardan geçirirken ortaya çıkar.

Bu gibi durumlarda React, iki bileşenin aynı olduğunu varsayar, bu nedenle ikinci bileşeni işleme zahmetine girmez. Sonuç olarak, ilk bileşende tanımladığınız herhangi bir durum, işlemeler arasında kalacaktır.

Göstermek için bu örneği alın. İlk olarak, aşağıdakilere sahipsiniz Tezgah bileşen:

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

Bu Tezgah bileşen kabul eder isim ebeveynden, bir yol olan nesne imhası yoluyla React'te prop'ları kullan. Sonra adı bir. Ayrıca iki düğme döndürür: biri saymak durumunda ve diğeri bunu artırmak için.

Yukarıdaki kodda yanlış bir şey olmadığını unutmayın. Hata, sayacı kullanan aşağıdaki kod bloğundan (Uygulama bileşeni) gelir:

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

Varsayılan olarak, yukarıdaki kod Kingsley adlı sayacı oluşturur. Sayacı beşe yükseltirseniz ve Takas düğmesine bastığınızda, Sally adlı ikinci sayacı oluşturur.

Ancak sorun şu ki, siz onları değiştirdikten sonra sayaç varsayılan sıfır durumuna sıfırlanmayacak.

Bu hata, her iki durumun da aynı öğeleri aynı sırada oluşturması nedeniyle oluşur. React, "Kingsley" sayacının "Sally" sayacından farklı olduğunu bilmiyor. Tek fark, isim prop ama ne yazık ki React bunu öğeleri ayırt etmek için kullanmıyor.

Bu sorunu iki şekilde aşabilirsiniz. İlki, DOM'unuzu değiştirmek ve iki ağacı farklı yapmaktır. Bu, anlamanızı gerektirir DOM nedir?. Örneğin, ilk sayacı bir eleman ve ikincisi a içinde öğe:

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

"Kingsley" sayacını artırırsanız ve Takas, durum 0'a sıfırlanır. Yine bu, iki DOM ağacının yapısının farklı olması nedeniyle olur.

Ne zaman isKingsley değişken doğru, yapı olacak div >div > Tezgah (bir div içeren bir div, bir Sayaç içeren). Düğmeyi kullanarak sayaç durumunu değiştirdiğinizde, yapı şu hale gelir: div > bölüm > Tezgah. Bu tutarsızlık nedeniyle, React otomatik olarak sıfırlama durumuna sahip yeni bir Sayaç oluşturacaktır.

İşaretlemenizin yapısını her zaman bu şekilde değiştirmek istemeyebilirsiniz. Bu hatayı çözmenin ikinci yolu, farklı işaretleme ihtiyacını ortadan kaldırır.

Yeni Bir Bileşen Oluşturmak için Tuşları Kullanma

Anahtarlar, React'in oluşturma işlemi sırasında öğeler arasında ayrım yapmasına izin verir. Dolayısıyla, tamamen aynı olan iki öğeniz varsa ve React'e birinin diğerinden farklı olduğunu bildirmek istiyorsanız, her öğe için benzersiz bir anahtar özelliği ayarlamanız gerekir.

Her sayaca şu şekilde bir anahtar ekleyin:

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

Şimdi, "Kingsley" sayacını artırdığınızda ve Takas, React yeni bir sayaç oluşturur ve durumu sıfırlar.

React her bir öğe arasındaki farkı bilemeyeceğinden, aynı türde bir öğe dizisini oluştururken de anahtarları kullanmalısınız.

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


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

Anahtarları atadığınızda, React her öğeyle ayrı bir sayaç ilişkilendirir. Bu şekilde, dizide yaptığınız değişiklikleri yansıtabilir.

Başka Bir Gelişmiş Anahtar Kullanım Örneği

Bir öğeyi başka bir öğeyle ilişkilendirmek için tuşları da kullanabilirsiniz. Örneğin, bir durum değişkeninin değerine bağlı olarak bir girdi öğesini farklı öğelerle ilişkilendirmek isteyebilirsiniz.

Göstermek için, Uygulama bileşeninde ince ayar yapın:

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

Şimdi, arasında her geçiş yaptığınızda Kingsley ve Sally için öğeler, girişinizin anahtar niteliğini "Kingsley" ve "Sally" arasında otomatik olarak değiştiriyorsunuz. Bu, React'i, düğmenin her tıklamasıyla giriş öğesini tamamen yeniden oluşturmaya zorlayacaktır.

React Uygulamalarını Optimize Etmek İçin Daha Fazla İpucu

Kod optimizasyonu, web veya mobil uygulamanızda hoş bir kullanıcı deneyimi yaratmanın anahtarıdır. Farklı optimizasyon teknikleri hakkında bilgi sahibi olmak, React uygulamalarınızdan en iyi şekilde yararlanmanıza yardımcı olabilir.

En iyi yanı, bu optimizasyon tekniklerinin çoğunu React Native uygulamalarıyla da uygulayabilmenizdir.