Etkileşim Ekleme

Olaylara tepki verme

React, JSX’inize olay yöneticileri eklemenize olanak tanır. Olay yöneticileri; tıklama, üzerine gelme (hover), form girdilerine odaklanma gibi kullanıcı aksiyonlarına tepki vermek için tetiklenecek olan fonksiyonlarınızdır.

<button> gibi yerleşik bileşenler yalnızca onClick gibi yerleşik tarayıcı olaylarını destekler. Ancak kendi bileşenlerinizi oluşturabilir ve olay yöneticisini ileteceğiniz prop’lara uygulamanıza özgü isimler verebilirsiniz.

State: bir bileşenin hafızası

Bileşenlerin, genellikle bir etkileşim sonucunda ekrandakileri değiştirmesi gerekir. Forma yazı yazmak girdi alanını güncellemeli, bir resim slaytında “ileri” tıklamak hangi resmin görüntüleneceğini değiştirmeli, “satın al” a tıklamak bir ürünü alışveriş sepetine koymalıdır. Bileşenlerin; mevcut girdi değeri, seçili görsel, alışveriş sepeti gibi şeyleri “hatırlaması” gerekir. React’te bu tür bileşene özgü bellekler state olarak adlandırılır.

Hook’u ile bir bileşene state ekleyebilirsiniz. Hook’lar, bileşenlerinizde React özelliklerini kullanmanızı sağlayan özel fonksiyonlardır (state bu özelliklerden biridir). useState Hook’u, bir state değişkeni bildirmenizi sağlar. Bu Hook başlangıç state’ini alır ve bir çift değer döndürür: mevcut state ve state’i güncellemenizi sağlayan bir fonksiyon.

Aşağıda resim galerisinin state’i nasıl kullandığını ve state’i tıklama ile nasıl güncellendiğini görebilirsiniz:

Render et ve işle

Bileşenleriniz ekranda gösterilmeden önce, React tarafından render edilmek zorundadırlar. Bu işlemdeki adımları anlamak, kodunuzun nasıl çalıştığını düşünmenize ve davranışını açıklamanıza yardımcı olacaktır.

Bileşenlerinizin mutfakta malzemelerden lezzetli yemekler hazırlayan aşçılar olduğunu hayal edin. Bu senaryoda React, müşterilerin siparişlerini alan ve bu siparişleri sunan garsondur. Kullanıcı arayüzünü isteme ve sunma sürecinin üç aşaması vardır:

1. Bir render tetiklemek (müşterinin siparişinin mutfaktaki aşçıya iletilmesi)
2. Bileşeni render etmek (siparişin mutfakta hazırlanması)
3. DOM’a işlemek (siparişin masaya götürülmesi)

Anlık görüntü olarak state

Sıradan JavaScript değişkenlerinin yanı sıra, React state’i daha çok anlık bir görüntü olarak davranır. Bu değişkeni ayarlamak zaten mevcut state değişkenini değiştirmez onun yerine yeniden render tetikler. Bu ilk başta şaşırtıcı gelebilir!

Bu davranış, ince hatalardan kaçınmanıza yardımcı olur. Aşağıda küçük bir mesajlaşma uygulaması vardır. “Gönder” butonuna tıkladıktan sonra alıcıyı Bob ile değiştirin ve ne olacağını tahmin etmeye çalışın. 5 saniye sonra kimin ismi alert kutusunda çıkacaktır?

State güncellemelerinin kuyruğa alınması

Bu bileşen hatalıdır: “+3” butonuna tıklamak skoru sadece bir artırmaktadır.

sayfası bu duruma neyin neden olduğunu açıklamaktadır. State’i değiştirmek yeni bir yeniden render isteyecektir ama hali hazırda çalışan koddaki state’i değiştirmeyecektir. Yani score değeri setScore(score + 1) çağırıldıktan hemen sonra 0 olmaya devam edecektir.

Bu sorunu, state’i değiştirirken güncelleyici fonksiyon ileterek düzeltebilirsiniz. setScore(score + 1) yerine setScore(s => s + 1) kullanmanın “+3” butonunu nasıl düzelttiğine dikkat edin. Bu, birden çok state güncellemesini kuyruğa almanızı sağlar.

State içerisindeki nesneleri güncelleme

State, nesneler de dahil olmak üzere herhangi bir JavaScript değerini tutabilir. Ancak, React state’inde tuttuğunuz nesneleri ve dizileri direkt olarak değiştirmemelisiniz. Onun yerine, nesneleri ve dizileri güncellemek istediğinizde, yeni bir tane yaratmanız gerekmektedir (ya da mevcut olanın kopyasını alın) ve daha sonra state’i o kopyayı kullanacak şekilde güncelleyin.

Genel olarak, değiştirmek istediğiniz nesneleri ve dizileri kopyalamak için ... spread sözdimini kullanacaksınız. Örneğin, iç içe nesneleri güncellemek şöyle gözükecektir:

Eğer objeleri kopyalamak zor bir hale geldiyse, tekrarlı hale gelen kodu azaltmak için gibi bir kütüphane kullanabilirsiniz:

State içerisindeki dizileri güncelleme

State içerisinde saklayabileceğiniz bir diğer değiştirilebilir JavaScript nesnesi dizilerdir ve dizilere salt okunur olarak davranılmalıdır. Nesnelerde olduğu gibi, state’te saklı diziyi güncellemek istediğinizde, yeni bir tane yaratmanız gerekmektedir (ya da mevcut olanın bir kopyasını alın) ve daha sonra yeni diziyi kullanacak şekilde state’i ayarlayın:

Eğer dizileri kopyalamak zor bir hale geldiyse, tekrarlı hale gelen kodu azaltmak için gibi bir kütüphane kullanabilirsiniz:

Sırada ne var?

sayfasına gidin ve bu bölümü sayfa sayfa okumaya başlayın!

Bu konulara zaten aşina iseniz, neden sayfasını okumuyorsunuz?