React Native ile useState useEffect Kullanımı
Hooks , React 16.8'e yeni eklenen bir özelliktir. Bir sınıf yazmadan state ve diğer React özelliklerini kullanmanıza izin verirler.
Giriş sayfası Hooks'u tanımak için örnek:
Daha önce React'te sınıfları kullandıysanız bu kod tanıdık gelecektir:
Not
Burada daha gerçekçi bir örnek yerine neden sayaç kullandığımızı merak ediyor olabilirsiniz. Bu, Hooks'la ilk adımlarımızı atmaya devam ederken API'ye odaklanmamıza yardımcı olmak içindir.Hooks ve Fonksiyon Bileşenleri
Bir hatırlatma olarak, React'taki fonksiyon bileşenleri şuna benzer:
veya bu:
Bunları daha önce “durum bilgisi olmayan bileşenler” olarak biliyor olabilirsiniz. Artık bunlardan React durumunu kullanma yeteneğini sunuyoruz, bu yüzden “fonksiyon bileşenleri” adını tercih ediyoruz.
Kancalar sınıfların içinde çalışmaz . Ancak ders yazmak yerine bunları kullanabilirsiniz.
Yeni örneğimiz,
useStateHook'u React'tan içe aktararak başlıyor:
Kanca nedir? Hook, React özelliklerine “bağlanmanızı” sağlayan özel bir fonksiyondur. Örneğin,
useStatefonksiyon bileşenlerine React durumu eklemenizi sağlayan bir Hook'tur. Diğer Hook’ları daha sonra öğreneceğiz.
Hook’u ne zaman kullanmalıyım? Bir fonksiyon bileşeni yazarsanız ve ona bir durum eklemeniz gerektiğini fark ederseniz, daha önce onu bir sınıfa dönüştürmeniz gerekiyordu. Artık mevcut fonksiyon bileşeninin içinde bir Hook kullanabilirsiniz. Bunu hemen şimdi yapacağız!
Not:
Bir bileşen içinde Hook'ları nerede kullanabileceğiniz ve kullanamayacağınız konusunda bazı özel kurallar vardır. Bunları Hooks Kuralları'nda öğreneceğiz .
Bir sınıfta, yapıcıda ayarını yaparak
countdurumu başlatırız:
0
this.state
{ count: 0 }
Bir fonksiyon bileşeninde elimizde yok
this, dolayısıyla atayamayız veya okuyamayız
this.state.
useStateBunun yerine Hook'u doğrudan bileşenimizin içinden çağırırız :
Aramak ne
useStateişe yarar? Bir “durum değişkeni” bildirir. Değişkenimiz çağrıldı
countama buna başka bir şey de diyebiliriz, mesela
banana. Bu, işlev çağrıları arasında bazı değerleri "korumanın" bir yoludur; bir sınıfta sağlanan
useStateyeteneklerin aynısını kullanmanın yeni bir yoludur .
this.stateNormalde, fonksiyondan çıkıldığında değişkenler "kaybolur" ancak durum değişkenleri React tarafından korunur.
useStateTartışma olarak neye geçeceğiz ? Hook'un tek argümanı
useState()başlangıç ??durumudur. Sınıflardan farklı olarak durumun bir nesne olması gerekmez. İhtiyacımız olan tek şey buysa, bir sayıyı veya dizeyi tutabiliriz. Örneğimizde, kullanıcının kaç kez tıkladığını gösteren bir sayı istiyoruz, bu nedenle
0değişkenimiz için başlangıç ??durumu olarak iletin. (Eğer iki farklı değeri state’te saklamak isteseydik iki kere çağırırdık
useState().)
Ne
useStategeri döner? Bir çift değer döndürür: geçerli durum ve onu güncelleyen bir işlev. Bu yüzden yazıyoruz
const [count, setCount] = useState(). Bu , onları bir çift halinde almanız dışında, bir sınıfa benzer
this.state.countve bir sınıftadır.
this.setStateKullandığımız sözdizimine aşina değilseniz, bu sayfanın alt kısmında ona geri döneceğiz .
Artık Hook'un ne yaptığını bildiğimize göre
useStateörneğimiz daha anlamlı olmalı:
Adında bir durum değişkeni bildiriyoruz
countve onu olarak ayarlıyoruz
0. React, yeniden oluşturmalar arasında mevcut değerini hatırlayacak ve en güncel olanı fonksiyonumuza sunacaktır. Güncel olanı güncellemek istiyorsak
countarayabiliriz
setCount.
Not
Merak ediyor olabilirsiniz: Neden bunun yerine
useStateisimlendirilmedi
createState?
"Oluştur" tam olarak doğru olmaz çünkü durum yalnızca bileşenimiz ilk kez görüntülendiğinde oluşturulur. Bir sonraki render sırasında
useStatebize mevcut durumu verir. Yoksa kesinlikle “devlet” olmazdı! Hook adlarının her zaman ile başlamasının da bir nedeni vardır
use. Bunun nedenini daha sonra Hook Kuralları'nda öğreneceğiz .
Bir sınıftaki mevcut sayıyı görüntülemek istediğimizde şunu okuruz
this.state.count:
countBir fonksiyonda doğrudan şunları kullanabiliriz :
Bir sınıfta durumu
this.setState()güncellemek için çağrı yapmamız gerekir
count:
Bir fonksiyonda zaten
setCountve
countdeğişkenlerimiz var, dolayısıyla ihtiyacımız yok
this:
Şimdi öğrendiklerimizi satır satır özetleyelim ve anlayıp anlamadığımızı kontrol edelim.
- Satır 1:
useStateHook'u React'tan içe aktarıyoruz . Yerel durumu bir fonksiyon bileşeninde tutmamızı sağlar.
- Satır 4: Bileşenin içinde
ExampleHook'u çağırarak yeni bir durum değişkeni bildiririz
useState. İsim verdiğimiz bir çift değeri döndürür. Değişkenimizi çağırıyoruz
countçünkü düğme tıklamalarının sayısını tutuyor.
0Tek argüman olarak ileterek onu sıfıra başlatırız
useState. Döndürülen ikinci öğenin kendisi bir işlevdir.
countAdını vermemiz için güncellememizi sağlar
setCount.
- 9. Satır: Kullanıcı tıkladığında
setCountyeni bir değerle çağırırız. React daha sonra bileşeni yeniden oluşturacak
Exampleve yeni
countdeğeri ona iletecektir.
Bu ilk başta anlaşılması gereken çok şey gibi görünebilir. Acele etmeyin! Açıklamada kaybolduysanız yukarıdaki koda tekrar bakın ve yukarıdan aşağıya okumaya çalışın. Devletin sınıflarda işleyişini “unutmaya” çalıştığınızda ve bu koda yeni gözlerle baktığınızda, bunun bir anlam kazanacağına söz veriyoruz.
Bir durum değişkeni bildirdiğimizde köşeli parantezleri fark etmiş olabilirsiniz:
Soldaki adlar React API'nin bir parçası değildir. Kendi durum değişkenlerinizi adlandırabilirsiniz:
Bu JavaScript sözdizimine "dizi imhası" adı verilir . Bu, iki yeni değişken oluşturduğumuz anlamına gelir
fruit;
setFruitWhere ,
fruittarafından döndürülen ilk değere ayarlanır
useStateve
setFruitikincisidir. Bu koda eşdeğerdir:
İle bir durum değişkeni bildirdiğimizde
useState, bir çift (iki öğeli bir dizi) döndürür. İlk öğe mevcut değer, ikincisi ise onu güncellememizi sağlayan bir fonksiyondur.
[0]Onlara erişmek için ve kullanmak
[1]biraz kafa karıştırıcıdır çünkü belirli bir anlama sahiptirler. Bunun yerine dizi yıkımını kullanmamızın nedeni budur.
Not
React'e
useStatebenzer bir şey aktarmadığımız için React'ın hangi bileşenin karşılık geldiğini nasıl bildiğini merak ediyor olabilirsiniz . Bu soruyu ve daha birçok soruyu SSS bölümünde
thisyanıtlayacağız .
Durum değişkenlerini bir çift olarak bildirmek
[something, setSomething]de kullanışlıdır çünkü birden fazla durum değişkeni kullanmak istersek farklı durum değişkenlerine farklı adlar vermemize olanak tanır:
Yukarıdaki bileşende yerel değişkenler olarak
age,
fruit, ve var
todosve bunları ayrı ayrı güncelleyebiliriz:
Çok fazla durum değişkeni kullanmanıza gerek yoktur . Durum değişkenleri nesneleri ve dizileri gayet iyi tutabilir, böylece ilgili verileri yine de birlikte gruplayabilirsiniz. Ancak
this.setStatesınıftan farklı olarak, bir durum değişkeninin güncellenmesi onu birleştirmek yerine her zaman onun yerine geçer .
Kaynak