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.
Bu konuyu öğrenmeye hazır mısınız?
Olay yöneticilerinin nasıl ekleneceğini öğrenmek için bölümünü okuyun.
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:
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak bir değeri nasıl hatırlayacağınızı ve etkileşim ile o değeri nasıl güncelleyeceğinizi öğrenin.
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:
- Bir render tetiklemek (müşterinin siparişinin mutfaktaki aşçıya iletilmesi)
- Bileşeni render etmek (siparişin mutfakta hazırlanması)
- DOM’a işlemek (siparişin masaya götürülmesi)
Tetikle Render et İşle
Rachel Lee Naborstarafından görselleştirilmiştir.
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak kullanıcı arayüzü güncellemesinin yaşam döngüsünü öğrenin.
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?
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak olay yönetecilerinde state’in neden “sabit” ve değişmez göründüğünü öğrenin.
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.
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak state güncellemelerini nasıl kuyruğa alacağınızı öğrenin.
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:
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak nesneleri nasıl doğru şekilde güncellemeniz gerektiğini öğrenin.
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:
Bu konuyu öğrenmeye hazır mısınız?
sayfasını okuyarak dizileri nasıl doğru şekilde güncellemeniz gerektiğini öğrenin.
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?