React, JavaScript için en popüler ön uç çerçevelerden biridir. Angular gibi diğer çerçevelerin aksine, çok fikirsizdir. Bu nedenle, React kodunuzu nasıl yazmak veya yapılandırmak istediğinize karar vermek size kalmıştır.

Bu makale, React uygulamanızın performansını iyileştirmek için izlemeniz gereken bazı uygulamaları incelemektedir.

1. Sınıflar Yerine İşlevsel Bileşenler ve Kancalar Kullanmak

React'te şunları yapabilirsiniz: kancalı sınıf veya işlevsel bileşenleri kullanın. Bununla birlikte, sınıflara kıyasla daha kısa ve okunabilir kodlar sağladıklarından, işlevsel bileşenleri ve kancaları daha sık kullanmalısınız.

NASA API'sinden gelen verileri görüntüleyen aşağıdaki sınıf bileşenini göz önünde bulundurun.

sınıfı NasaData, React'i genişletir. Bileşen {
 yapıcı (sahne) {
 süper (sahne);
 this.durum = {
 veri: [],
 };
 }
 componentDidMount() {
 gidip getirmek(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 this.setState({
 veri: json,
 });
 });
 }





instagram viewer


 render() {
 const { veri } = this.durum;
 if (!veri.uzunluk)
 dönüş (


 Veri işleniyor... 
{" "}



 );
 dönüş (
 <>
 Sınıf bileşenini kullanarak verileri getir 
{" "}
 {data.map((item) => (
{Ürün başlığı}

 ))}
 );
 }
}

Aynı bileşen, kancalar kullanılarak yazılabilir.

const NasaData = () => {
 const [veri, setdata] = useState (boş);
 useEffect(() => {
 gidip getirmek(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 set verisi (json);
 });
 }, [veri]);
 dönüş (
 <>
 Sınıf bileşenini kullanarak verileri getir 
{" "}
 {data.map((item) => (
{Ürün başlığı}

 ))}
 );
};

Yukarıdaki kod bloğu, sınıf bileşeniyle aynı şeyi yapsa da, daha az karmaşık, minimal ve daha iyi bir geliştirici deneyimine katkıda bulunan anlaşılması kolaydır.

2. Durumu Kullanmaktan Kaçının (Mümkünse)

React durumu, değiştirildiğinde React bileşeninin yeniden oluşturulmasını tetikleyen verilerin kaydını tutar. React uygulamaları oluştururken, durumu kullanmaktan mümkün olduğunca kaçının, çünkü ne kadar çok durum kullanırsanız, uygulamanız genelinde o kadar fazla veriyi takip etmeniz gerekir.

Devletin kullanımını en aza indirmenin bir yolu, onu sadece gerektiğinde ilan etmektir. Örneğin, bir API'den kullanıcı verilerini alıyorsanız, bireysel özellikleri depolamak yerine tüm kullanıcı nesnesini durumda saklayın.

Bunu yapmak yerine:

const [kullanıcı adı, setusername] = useState('')
const [parola, setpassword] = useState('')

Bunu yap:

const [kullanıcı, setuser] = useState({})

Bir proje yapısına karar verirken, bileşen merkezli bir tane için gidin. Bu, bir bileşenle ilgili tüm dosyaların tek bir klasörde olması anlamına gelir.

Eğer bir gezinme çubuğu bileşen, adlı bir klasör oluşturun gezinme çubuğu içeren gezinme çubuğu bileşenin kendisi, stil sayfası ve bileşende kullanılan diğer JavaSript ve varlık dosyaları.

Bir bileşenin tüm dosyalarını içeren tek bir klasör, yeniden kullanmayı, paylaşmayı ve hata ayıklamayı kolaylaştırır. Bir bileşenin nasıl çalıştığını görmeniz gerekiyorsa, yalnızca tek bir klasör açmanız gerekir.

4. İndeksleri Anahtar Props Olarak Kullanmaktan Kaçının

React, bir dizideki öğeleri benzersiz bir şekilde tanımlamak için anahtarları kullanır. Anahtarlarla, React dizide hangi öğenin değiştirildiğini, eklendiğini veya diziden çıkarıldığını tam olarak belirleyebilir.

Dizileri oluştururken çoğu zaman, dizini anahtar olarak kullanabilirsiniz.

const Öğeler = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 dönüş (
 <>
 {arr.map((öğe, dizin) => {
{eleman}
;
 })}
 );
};

Bu bazen işe yarasa da, dizini anahtar olarak kullanmak, özellikle listenin değişmesi bekleniyorsa sorunlara yol açabilir. Bu listeyi düşünün.

const arr = ["item1", "item2", "item3", "item4", "item5"];

Şu anda, ilk liste öğesi, “Madde 1” dizinde sıfırdır, ancak listenin başına başka bir öğe eklediyseniz, “Madde 1” dizini, dizinizin davranışını değiştiren 1 olarak değişir.

Çözüm, liste öğesinin kimliğinin korunmasını sağlamak için dizin olarak benzersiz bir değer kullanmaktır.

5. Mümkünse Div'ler Yerine Fragmanları Tercih Edin

React bileşenlerinin, genellikle tek bir etikete sarılmış kodu döndürmesi gerekir. veya bir React parçası. Mümkünse parçaları tercih etmelisiniz.

kullanma DOM boyutunu artırır, özellikle büyük projelerde, sahip olduğunuz daha fazla etiket veya DOM düğümü, web sitenizin daha fazla belleğe ihtiyacı olduğu ve bir tarayıcının web sitenizi yüklemek için daha fazla güç kullandığı için. Bu, daha düşük sayfa hızına ve potansiyel olarak kötü kullanıcı deneyimine yol açar.

Gereksizleri ortadan kaldırmanın bir örneği Etiketler, tek bir öğe döndürürken bunları kullanmıyor.

const Düğme = () => {
 dönüş Görüntülemek;
};

6. Adlandırma Kurallarını Takip Edin

Bileşenleri diğer bileşen olmayan JSX dosyalarından ayırt etmek için adlandırırken her zaman PascalCase kullanmalısınız. Örneğin: Metin alanı, Gezinme Menüsü, ve Başarı Düğmesi.

Aşağıdaki gibi React bileşenlerinde bildirilen işlevler için camelCase kullanın tutamaçGirdi() veya gösteriElement().

7. Tekrarlanan Kodlardan Kaçının

Yinelenen kod yazdığınızı fark ederseniz, onu yeniden kullanılabilecek bileşenlere dönüştürün.

Örneğin, menü gerektiren her bileşene tekrar tekrar kod yazmak yerine navigasyon menünüz için bir bileşen oluşturmanız daha mantıklı.

Bileşen tabanlı mimarinin avantajı budur. Projenizi, uygulamanız genelinde yeniden kullanabileceğiniz küçük bileşenlere ayırabilirsiniz.

8. Props için Nesne Yıkımı Kullan

Props nesnesini iletmek yerine, prop adını iletmek için nesne yıkımını kullanın. Bu, her kullanmanız gerektiğinde props nesnesine başvurma ihtiyacını ortadan kaldırır.

Örneğin, aşağıdaki, props'u olduğu gibi kullanan bir bileşendir.

const Düğme = (sahne) => {
 dönüş {props.metin};
};

Nesne yok etme ile doğrudan metne atıfta bulunursunuz.

const Düğme = ({metin}) => {
 dönüş {Metin};
};

9. Harita Kullanarak Dizileri Dinamik Olarak Oluşturma

Kullanmak harita() tekrarlanan HTML bloklarını dinamik olarak oluşturmak için. Örneğin, kullanabilirsiniz harita() öğelerin bir listesini oluşturmak için etiketler.

const Öğeler = () => {
 const arr = ["item1", "item2", "item3", "item4", "item5"];
 dönüş (
 <>
 {arr.map((öğe, dizin) => {
{eleman}
;
 })}
 );
 };

Karşılaştırma amacıyla, listeyi onsuz nasıl oluşturabileceğiniz aşağıda açıklanmıştır. harita(). Bu yaklaşım çok tekrarlayıcıdır.

const Liste = () => {
 dönüş (


Madde 1

Öğe2

Öğe3

Öğe4

madde5




 );
};

10. Her React Bileşeni için Testler Yazın

Hata olasılığını azalttığı için oluşturduğunuz bileşenler için testler yazın. Test, bileşenlerin beklediğiniz gibi davranmasını sağlar. React için en yaygın test çerçevelerinden biri Jest'tir ve testlerinizi gerçekleştirebileceğiniz bir ortam sağlar.

React, onu nasıl kullanacağınız konusunda biraz esnek olsa da, belirli uygulamaları takip etmek, deneyiminizden en iyi şekilde yararlanmanıza yardımcı olacaktır.

Bu ipuçlarını takip ederken, özel projenizi ve hedeflerinizi aklınızda bulundurun; bazıları belirli durumlarda diğerlerinden daha alakalı olacaktır.

Fetch ve Axios Kullanarak React'te API'ler Nasıl Tüketilir?

API'lerin nasıl kullanılacağını bilmek ister misiniz? API'lerin React'te nasıl tüketileceğini anlamak, API kullanımının önemli bir unsurudur.

Sonrakini Oku

Yazar hakkında