React Component Lifecycle: Bilmeniz Gerekenler [2022]

React'te uygulama, Bileşenler olarak bilinen mümkün olan en küçük parçalara bölünür. Bileşenler sunum veya kapsayıcı olabilir.

Sunum bileşenleri hakkında konuştuğumuzda, bunların hiçbir mantığı yoktur. Bileşenlerin içine gömülüdürler; sadece kullanıcı arayüzüne sahiptir.

Konteyner bileşenleri, sunum bileşenlerini kullanan ve bileşende iş mantığına sahip olan bileşenlerdir. Bu tür bileşenlerin, sorumlu olabilecekleri birçok kullanım durumundan birini elde etmek için genellikle yerel durum nesnelerini tutması gerekir. Bu bileşenler, sunum bileşenlerini alt bileşenler olarak kullanır ve çeşitli aksesuarlar kullanarak verileri iletir.

React, sınıf veya işlevsel bileşenlere sahip olmanızı sağlar. Tepki ekosisteminde kullanılan yaygın bir kalıp, sunum bileşeninin işlevsel bir bileşen türü ve kapsayıcı bileşenlerinin sınıf türü olmasıdır.

Reaksiyon yaşam döngüsü , bileşenlerin geçtiği kesin süreci ve reaksiyon bileşeni yaşam döngüsünün arkasındaki nedeni gösterir .

Fonksiyonel Bileşenler

Bunlar herhangi bir durumu olmayanlardır ve sadece proplar kullanılarak yapılan manipülasyonlardır.

Tüm bileşen yaşam döngüsü yöntemleri veya setState , bu tür bileşenlerin içinde kullanılamaz veya bunlara erişilemez.

Ödeme: React Proje Fikirleri

Sınıf Bileşenleri

Bu bileşenler yerel duruma sahip olabilir ve yaşam döngüsü yöntemlerine ve setState erişimine sahiptir .

Tepkideki tipik bir sınıf bileşeni şöyle görünür: -

Bileşen yaşam döngüsünün üç aşaması vardır: -

1. Montaj
2. güncelleniyor
3. sökme

Montaj

Herhangi bir bileşen oluşturulduğunda ve DOM'ye (Belge Nesne Modeli) eklendiğinde, kullanılan yöntemler şunlardır:

● yapıcı()

● statik getDerivedStateFromProps()

● render()

● componentDidMount()

güncelleniyor

Bir bileşene sağlanan destek veya durum değiştirildiğinde, bileşenin yeniden oluşturulması güncelleme aşaması olarak da bilinir. Bu aşamada, çağrılan aşağıdaki yaşam döngüsü yöntemleri aşağıda verilmiştir:

● statik getDerivedStateFromProps()

● olmalıdırComponentUpdate()

● render()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

Okuyun: Vue vs React: Vue ve React Arasındaki Fark

sökme

Bu yöntem, herhangi bir bileşenin bağlantısının kaldırılması sırasında çağrılır: -

● bileşen willUnmount()

Belge nesne modeli yok edilmeden önce çağrılacak son işlevdir. componentWillMount sırasında oluşturulan herhangi bir öğe için temizleme işlevi görür.

Bileşende hata işleme amacıyla ayrılmış birkaç yöntem vardır: -

● statik getDerivedStateFromError()

● componentDidCatch()

Yaygın olarak kullanılan yaşam döngüsü yöntemleri ayrıntılı olarak açıklanmıştır: -

● yapıcı(sahne)

Bu yaşam döngüsü yöntemi, bileşenlerin montaj aşamasında kullanılır. Burada bir yerel durum nesnesi bildirilebilir. super(props) başka bir ifadeden önce kurucunun içinde çağrılır; aksi takdirde this.props'a erişilirken bir hata oluşur.

Yerel durum nesnesini bildirmeyi veya olay işleyicisini örneğe bağlamayı amaçlamıyorsa, bileşenlerin yaşam döngüsü yöntemini yazmaya gerek yoktur.

Bir önceki döngü sona ermeden önce yeniden oluşturmayı tetikleyeceğinden, yapıcı () içindeki çağrı durumu önerilmez.

Constructor(), durumu doğrudan atayabileceğiniz tek yerdir. Aksi takdirde, durumu değiştirmek veya içine bir şey atamak gerekirse, this.setSate kullanılmalıdır.

● render()

Bu metod bileşenlerinin içinde JSX kısmı yazılır. JSX, HTML'ye benzer ancak javascript'in genişletilmiş bir sözdizimidir. JSX kullanırken render metodu içerisinde Javascript ifadelerini de kullanabiliriz.

Herhangi bir üst bileşenin render() yönteminin içinde alt bileşenler olabilir. Hepsi, reaksiyon bileşenlerinin temeli olan kompozisyon modelini takip eder.

Ebeveynin render yöntemi çağrıldığında, alt bileşenler için de render başlar ve üst render ancak tüm alt render tamamlandıktan sonra tamamlanır.

Oluşturma yöntemi gerekli bir yöntemdir; bu olmadan, bileşen yapılamaz çünkü bir bileşenin görünüm bölümünün yazılabileceği tek yer burasıdır.

Render yöntemi saftır; bu, içindeki durumu değiştiremeyeceği anlamına gelir.

Güncelleme aşamasındaki herhangi bir bileşen için, belirli bir bileşenin yeniden oluşturma işleminin gerçekleşip gerçekleşmeyeceği, mustComponentUpdate() yaşam döngüsü yönteminin dönüş türüne veya kullanımına bağlı olabilir.

Bu yöntemin içinde API çağrıları ve tarayıcı ile herhangi bir etkileşim olması tavsiye edilmez ve bir hata verir.

● componentDidMount()

Bu yöntem, bileşen monte edildikten hemen sonra çağrılır. Artık DOM, daha fazla manipülasyon için kullanılabilir. Bu yöntemin içinde setState çağrılabilir .

Ayrıca tarayıcı veya API çağrıları ile etkileşim buradan yapılabilir.

Bu yöntem yalnızca bir kez çağrılır, bu, oluşturma süresi boyuncadır. Yöntem daha fazla yeniden oluşturma bölümünde çalışmayacak ve içindeki mantık da çalışmayacaktır.

● componentDidUpdate()

Bu, componentDidMount ile aynıdır.; Bunun yalnızca bir bileşenin yeniden oluşturulması gerçekleştiğinde çağrılması arasındaki tek farkla bir hata alabilirsiniz. Bu yöntem ilk işleme için çağrılmaz.

setState ve yan etkiler bu metot içerisinde yapılabilir. Ancak setState'in bir koşula sarılması gerekir; aksi takdirde, sonsuz render döngüsüne girilebilir ve render asla bitmez.

Ayrıca, shouldComponentUpdate() işlevi false döndürürse componentDidUpdate çağrılmaz.

● componentWillUnmount()

Bu yöntem, bir bileşenin demonte aşaması devam ederken çağrılır.

Yöntemin içinde ideal olarak olay işleyicilerinin kaldırılması ve belleğin temizlenmesi sağlanabilir.

Bir bileşenin yeniden oluşturulmasına neden olduğu için setState() işlevi bunun içinde çağrılmamalıdır.

● olmalıdırComponentUpdate()

Tepki uygulamaları geliştirirken, çoğu zaman bileşenlerin gereksiz yere yeniden oluşturulmasından kaçınılması gereken durumlar vardır. Bu sınıf içi bileşeni elde etmek için, yukarıda belirtilen yöntem vardır. Bu yöntem false döndürürse, bileşenin ve alt bileşenlerinin yeniden oluşturulması gerçekleşmez.

Önceki aksesuarlar kontrol edilebilir ve hiçbir değişiklik olmamasını sağlamak için sağlanan yeni aksesuarlarla karşılaştırılabilir ve ardından yanlış döndürülebilir.

Bunun içinde setState() yönteminin çağrılması tekrar önerilmez, yeniden işlemeye neden olur.

Ayrıca bu yöntem içerisinde yan etkiler yapılmamalıdır.

Bu yöntemin başka bir alternatifi daha var. Sınıfı genişletirken React.pureComponents kullanılabilir. Bu, mustComponentUpdate()'den çok daha kararlı ve güvenilirdir.

Son olarak, hataları yakalamak için mevcut olan reaksiyon bileşenlerinin hata sınırları türü vardır.

Bileşeni basitçe hata sınırı bileşeniyle sarmak gerekir.

Bu özel bileşenin içinde kullanılan iki yaşam döngüsü yöntemi vardır:-

1. statik getDerivedStateFromError()
2. bileşenDidCatch()

Herhangi bir alt bileşen hata verirse her ikisi de çağrılır.

Birincisi, oluşturma aşamasında çağrılır, bu nedenle içinde hiçbir yan etkiye izin verilmez. İkincisi, taahhüt aşamasında çağrılır, bu nedenle yan etkilere izin verilir.

Ayrıca Okuyun: Hindistan'da ReactJS Geliştirici Maaşı

Dünyanın En İyi Üniversitelerinden Online Yazılım Mühendisliği Kursları öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Çözüm

Tepki bileşeni yaşam döngüsü , koda karmaşıklık katar, ancak yöntemlerle yapılan sistematik yürütme ve manipülasyon, geliştiricinin bakış açısından oldukça çekici görünmektedir. React yaşam döngüsü , bileşenlerin yeniden yapılandırılmasına veya manipüle edilmesine olanak tanır.

Tepki, full-stack geliştirme hakkında daha fazla bilgi edinmek istiyorsanız, upGrad & IIIT-B'nin çalışan profesyoneller için tasarlanmış ve 500+ saatlik zorlu eğitim, 9+ proje sunan Full-stack Yazılım Geliştirmede Yönetici PG Programına göz atın , ve ödevler, IIIT-B Mezun statüsü, pratik uygulamalı bitirme projeleri ve en iyi firmalarla iş yardımı.

Geleceğin Kariyerine Hazırlanın

Tam Yığın Geliştirmede Executive PG Programına Şimdi Başvur