React Series
React Action Handler ’a Neden this Bind Ediyoruz ?
React da handleClick vb… neden this.handleClick.bind(this) yapıyoruz. Buna ihtiyaç var mı ? Biraz daha derinlemesine sorgulayarak bu soruya cevap vermeye çalışacağım.
React Class Bileşenlerde görmüşsünüzdür. Bir Event Handler yazarken bunu ya constructor içerisinde bind ediyoruz veya arrow fonksiyon kullanarak yazıyoruz ama Neden ?
Aslında Arrow fonksiyon olarak yazmayı ayrı fonksiyon içerisinde değilde aynı aşağıdaki gibi yazabilirsiniz.
Peki sorumuza gelelim neden normal fonksiyon tanımlamalarında bind gerekiyor iken, arrow fonksiyonda bind gerekmiyor ? … (apply, call, bind ve this kavramlarını bilmiyor iseniz. ve Öncesinde aşağıdaki yazıyı okumanızı öneririm.
Aynı şekilde arrow fonksiyon ve normal fonksiyonlar arasındaki farkı bilmiyorsanız, yine aşağıdaki yazıyı okumanızı öneririm.
Yukarıdaki yazılarıda okuduysanız konunun React ile değilde JavaScript yapısı ile alakalı olduğunu görebilirsiniz. React Class bileşeni oluşurken onClick referans olarak verilen fonksiyon referansı eklerken elimizde henüz this yok…. ama arrow fonksiyon çağrılma sırasında o variable bağlı fonksiyon çağrıldığında elimizde this olduğu için ekstra bind işlemi yapmanız gerekmiyor..
Küçük bir JS örneği ile konuya tekrar bakalım… Aşağıdaki örnekte timer ile bir callback fonksiyonunu referans verip çağırdığımızda “” olarak çıkar.
Burada 2 yöntem ile bu sorunu çözebiliriz oda fonksiyon oluşturulduğu anda constructor context bağlamak bind etmek…
2nci yöntemde fonksiyon çağrımında arrow fonksiyon oluşturmak. Arrow fonksiyonların bind yeteneği olmadığı için bir context bağlayamaz ve çağrım zamanı ilgili context yani (this) geçeceği için bu sorun ile hiç karşılaşmazsınız.
Bir diğer yöntemde React’da Class Component yerine Function Component kullanarak tüm this kavramlarından kurtulmaktır.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
