React useEffect() Hook: Kullanımı, Nasıl ve Ne Zaman Kullanılacağı

useEffect() Kancasına Giriş

useeffect, önemli bir bileşenikancalar .Veri alma, olay dinleyicileri kurma veya DOM'u değiştirme gibi görevleri yerine getirir ve kullanıcıların işlevsel bileşenleri kullanarak yan etkileri gerçekleştirmesine olanak tanır. Ayrıca bileşen yaşam döngüsünü de kontrol eder.

useeffectkancası, bir işlev ve isteğe bağlı bir bağımlılık dizisi olmak üzere iki bağımsız değişkenden yararlanır.İlk bağımsız değişken olarak iletilen işlev, bileşenin ilk oluşturulmasından sonra ve ardından her güncellemeden sonra yürütülür. Bağımlılık dizisini kullanarak bir etkinin bağlı olduğu değişkenleri belirtebilirsiniz. Bağımlılık dizisinin değişkenlerinden herhangi biri değişirse, etkinin yeni bir çalıştırması gerçekleştirilir.

ES6 sınıfı bileşenlerin yaşam döngüsü altında karşılaşılan zorlukların üstesinden gelmek için doğal olarakuseeffect kancası oluşturuldu.Ancak, artık temel tepki kavramlarından biri haline geldi.

Tepkide useeffect'in ne olduğuna dair bu kısa bilgiyle , şimdi sözdizimine bakalım.

useEffect() Kancasının Temel Sözdizimi

useEffect iki bağımsız değişkeni destekler ; ikinci bağımsız değişken isteğe bağlıdır. Sözdizimi aşağıdaki gibidir:

useEffect(<işlev>, <bağımlılık>)

İşlev, yan etki mantığını içerir. DOM güncellemesinden hemen sonra bir geri aramanın yürütülmesini sağlar.

Bağımlılık, yan etkilerinizin, yani durum ve donanım değerlerinin isteğe bağlı bir bağımlılık dizisini içerir.Use Effect kancasının, yalnızca oluşturma sırasında bağımlılıklar değiştiyse geri arama çalıştırdığını unutmayın .

Sözdizimi, useEffect()'in tek amacına hizmet eder. Yan etki mantığınızı geri çağırma işlevinin içine yerleştirmenize ve ardından yan etkinin ne zaman çalıştırılması gerektiğini kontrol etmek için bağımlılıklar bağımsız değişkenini kullanmanıza izin verir.

useEffect() Hook'u uygularken aşağıdaki sözdizimini göz önünde bulundurabilirsiniz:

// useEffect'i içe aktar

'tepki'den { useEffect } içe aktarın;

işlev Bileşenim() {

// onu döndürülen JSX'in üstünde çağırır

// ona iki argüman iletir, yani bir dizi ve bir fonksiyon

useEffect(() => {

// efekt fonksiyonu

dönüş () => {

// temizleme işlevi

};

}, [/* bağımlılık dizisi */]);

// bileşen oluşturma mantığı

}

}

Rekabette avantaj elde etmek içinücretsiz teknoloji kurslarımızagöz atın .

Bileşenleri useEffect() Hook ile Takma ve Çıkarma

Montaj

Bir React bileşeninin yaşam döngüsünün ilk aşaması, bileşenlerin oluşturulmasını ve DOM'a eklenmesini içerir. React useeffect'in bu yaşam döngüsü aşaması , bileşen monte edildiğinde yürütülen componentDidMount yaşam döngüsü yöntemini içerir.

Burada, useEffect() kancası kullanılarak bileşenlerin montajına bir örnek verilmiştir.

componentDidMount() {

console.log(“Bileşen başarıyla kuruldu”);

this.setState({

yüklendi: doğru

})

}

Yukarıdaki örnekte componentDidMount, setState'i kullanmanıza izin verir. Böylece, yaşam döngüsü yönteminde durumu kolayca ayarlayabilir ve değiştirebilirsiniz. İlgili yöntem, API çağrılarını kullanır, uzak uç noktaları çağırır ve verileri getirir.

Çıkarma

Bu tepki kullanım etkisi yaşam döngüsü yöntemi, bir DOM'daki temizlemeyi işler.Bir bileşeni DOM'dan kaldıran biruseeffect temizleme işlevi gibidir .Buna React'te unmounting denir. Çıkarma yalnızca bir yaşam döngüsü yöntemi kullanır, yani componentWillUnmount. DOM'dan bir bileşeni kaldırmak istediğinizde çağrılır.

componentWillUnmount() {

console.log("Bileşen başarıyla kaldırıldı");

}

Durum Değişikliklerini İşleme için use effect() Hook'u kullanma

Useeffect , her işlemeden sonra yürütülür.Ayrıca, bir durum değişikliğinin onaylanmasında belirli kodları çalıştırmak için de kullanılır. UseEffect() Hook içindeki ikinci bağımsız değişkeni ileterek efektin yürütülme zamanını kontrol edebilirsiniz. İkinci argüman bir bağımlılıklar dizisi olarak çalışır, yani karşılık gelen değişkenler değiştirilirse, etkinin yeniden çalıştırılması gerekir. Durumun değişken türlerinden biri olduğuna dikkat edin.

Aşağıdaki bölümde,kullanım efekti kancasının durum değişikliklerini nasıl ele aldığını açıklayan bir örnek gösterilmektedir.

Örneğin, bir "gün" değerine dayalı olarak bir yan etki çalıştırmak isteyebilirsiniz. Günün değerine bağlı olarak bir karşılama mesajı görüntülemek için bir yan etkiniz olduğunu varsayalım. Günün değeri bir durum değişkenine kaydedilir.

Bir gün seçtiğinizde durum güncellenir. Durum değerindeki değişiklik, karşılama mesajını güncellemenizi sağlar. Durum değişkenini, bağımlılık dizisinin bir alt kümesi olarak useEffect kancasına iletmelisiniz.

useEffect(() =>

{

// Yan etki

}, [durum]);

Yukarıdaki useeffect react native örneğinde , durum değişkeninin değeri güncellenirse yan etki çalışır.

Popüler Yazılım Mühendisliği Kurslarımızı keşfedin

API'ler ve Ağ İstekleri ile useEffect() Hook'u Kullanma

Bir sunucudan veri almak ve hataları işlemek için API'ler ve ağ istekleri ile 'useEffect()' kancasını kullanabilirsiniz. Burada 'useEffect()' öğesinin bir API ile nasıl kullanılacağına ve ağ hatalarının nasıl ele alınacağına dair bir örnek verilmiştir:

React'i içe aktarın, { useState, useEffect } 'react'ten;

işlev Bileşenim() {

const [veri, setData] = useState(null);

const [hata, setError] = useState(null);

useEffect(() => {

zaman uyumsuz işlev fetchData() {

denemek {

const yanıtı = getirmeyi bekliyor('https://api.example.com/data');

eğer (!response.ok) {

throw new Error('Ağ yanıtı iyi değildi');

}

const json = yanıt bekleniyor.json();

setData(json);

} yakalama (hata) {

setError(hata);

}

}

veriyi getir();

}, []);

eğer (hata) {

dönüş <div>Hata: {error.message}</div>;

}

eğer (!veri) {

dönüş <div>Yükleniyor…</div>;

}

geri dönmek (

<div>

<p>{data.message}</p>

</div>

);

}

Ağ isteklerini ve API yanıtlarını işlemek için ihtiyaç duyduğunuz ek işlevleri dahil etmek için bu örneği değiştirebilirsiniz.

Gelişmiş useEffect() Kanca Teknikleri

Gelişmiş Use Effect React Native tekniklerden biri ezberlemedir.Bir işlev çağrısının çıktısının önbelleğe alındığı bir optimizasyon tekniğidir. Daha sonra, aynı giriş tekrar beslendiğinde,useeffect dönüş işlevi onu döndürür.

İyi bilinen başka bir useEffect() Hook tekniği de useMemo Hook'tur. Bir değeri hesaplamanızı ve ezberlemenizi sağlar. Sözdizimi şöyledir:

'tepki'den { useMemo } içe aktarın

const memoizedValue = useMemo(() => computeExpensiveValue(x, y), [x, y])

useEffect() Kanca Bağımlılıkları

useEffect() Kanca bağımlılıkları, yan etkinizin bağımlılıklarının bir listesini içerirken durum veya prop değerlerini de içerir. Bağımlılıklar bağımsız değişkeni, bir bileşenin monte edilmesi veya belirli bir durum/destek değerinin güncellenmesi gibi bazı bileşen yaşam döngüsü olaylarını yakalamanıza olanak tanır.

Bağımlılıklar bağımsız değişkeni, bileşenin oluşturma döngüsünden bağımsız olarak, yan etkinin ne zaman başlatılacağını kontrol etmenizi sağlar.

useEffect() Hook ile Koşullu İşleme

useEffect Hook, koşulları kancanın içine koymanıza izin verir. İşte bir örnek.

useEffect(() => {

if (shouldExecute) {

// (koşulların listesi)

}

}, [Yürütmeli])

shouldExecute işlevi altında yürütmek istediğiniz zorunlu koşulları belirtmeniz gerekir.

effect() Hook'u ComponentDidMount() ve ComponentDidUpdate()'e karşı kullanın

useEffect() Hook ve componentDidUpdate() karşılaştırması:

useEffect() Hook ve componentDidMount() karşılaştırması:

UseEffect() Hook ile Yaygın Hatalar ve En İyi Uygulamalar.

Yaygın hatalar

1. Bağımlılıkları tanımlamamak

useEffect, bir bileşen oluşturulduğunda çalışır. Bu nedenle, bir yeniden işlemeyi tetiklemesi gereken değerleri tanımlamanız gerekir. Aksi takdirde, useEffect işleviniz performans sorunları yaratabilir.

2. useEffect kancasını çalıştırdıktan sonra temizlememek

useEffect, bileşen çıkarıldığında yürütülen bir temizleme işlevi döndürebilir. UseEffect'ten sonra temizlememek, bellek sızıntılarına ve diğer endişelere neden olabilir. Bu nedenle, useefekt temizleme işlevini kullanmak önemlidir .

3. setState'i useEffect işlevinde bağımlılık olmadan kullanma

Durumu useEffect'te güncellerseniz, başka bir işlemeyi tetikler. Bu sonsuz bir döngüye yol açabilir. Bunu önlemek için, güncellediğiniz durum değişkenini her zaman bir useEffect kancasında bir bağımlılık olarak tanımlamanız gerekir.

Ücretsiz Yazılım Geliştirme Kurslarımızı Keşfedin

En İyi Uygulamalar:

• useEffect kancasını kullanmak istiyorsanız, bileşen başına yalnızca bir tane kullandığınızdan emin olun. Birden çok useEffect kancası olması durumunda, bir bileşen her oluşturulduğunda bunların tümü çalışır. Bu nedenle, performans sorunları ve beklenmeyen davranışlar yaratabilir.
• UseEffect kancasını koşullar, döngüler veya iç içe işlevler içinde kullanmadığınızdan emin olun. State'i döngü içinde kullanırsanız, React, döngü her çalıştığında yeni bir durum değişkeni oluşturur. Böylece beklenmedik davranışlara yol açar.
• useEffect kancasını aşırı kullanmadığınızdan emin olun. Kodunuzun okunmasını zorlaştırabilirler ve aşırı kullanıldıklarında performansı etkileyebilirler.
• React işlevlerinden yalnızca useEffect kancasını çağırmalısınız. Bunu bir sınıf bileşeninden çağırırsanız, bir hata görürsünüz.

Çözüm

Herhangi bir ek kod yazmadan bileşenlerin donanımlarına ve durumlarına kolayca erişmek istiyorsanız, tepki olarak useeffect'i kullanmak en iyisidir .Durum veya pervane değiştiğinde yan etkilerin uygulanmasını kolaylaştırdığından, bileşenlerdeki yan etkileri önemli ölçüde basitleştirir. React bileşenlerinizin optimum performans göstermesini sağlamak için yukarıda tartışılan yönleri ve en iyi uygulamaları göz önünde bulundurabilirsiniz.

Zorlu yazılım geliştirme becerilerini öğrenmek, içinde bulunduğumuz çağda çok önemlidir. LJMU'dan upGrad'ın Bilgisayar Bilimleri Yüksek Lisansını takip ederek kendinizi bu en son becerilerle donatabilirsiniz . Kurs, Java, Python gibi beceriler ve ilgili alanlarda uzmanlık kazandırarak sizi uzman bir yazılım geliştiricisi yapar. Bu kursta kapsanan hususları kapsamlı bir şekilde öğrenmek, javascript geliştiricisi, yazılım mühendisi ve arka uç mühendisi gibi iş fırsatlarını keşfetmenize yardımcı olur.

UpGrad, yazılım geliştirme becerilerinde uzmanlaşmanın yanı sıra, IIITB'den Full Stack Development'ta Executive PG Programı ve Full Stack Software Development Bootcamp gibi kurslar aracılığıyla bir full-stack geliştirici olarak kariyerinizi yükseltmenize de yardımcı olur . Bu programlar, adayların zorlu tam yığın geliştirme becerileri edinmelerine ve başarılı bir kariyere giden yolu etkili bir şekilde açmalarına olanak tanıyan sürükleyici öğrenme platformları sağlar!