React, bir ön uç JavaScript çerçevesidir. HTML sayfaları oluşturmak ve bunları yönetmek sıkıcı olabilirken, React ekrandaki öğeleri ve bunların mantığını bileşenlere ayırarak işleri kolaylaştırır.

React, masaya çok şey getiriyor ancak en kullanışlı özelliklerden biri durum yönetimi. Bu makalede, React Hooks kullanarak durumu nasıl yöneteceğinizi öğreneceksiniz. Daha fazla ilerlemeden önce, bu makale React'in temellerini bildiğinizi varsayar.

ReactJS'deki Kancalar Nelerdir?

Kanca, durumu ve diğerlerini yönetmek için React'te tanıtılan yeni bir kavramdır. React'in özellikleri. React'te kancaları kullanarak, aksi takdirde sınıfları kullanacak uzun kodlar yazmaktan kaçınabilirsiniz. Aşağıdaki örnek, aşağıdakilerin bir örneğini göstermektedir: Kullanım Durumu kanca.

const [değişken, setVariable] = useState (başlangıç ​​değeri);

burada değişken devlettir ve setDeğişken durumu ayarlayan fonksiyondur. Kullanım Durumu durum değişkeninin başlangıç ​​değerini tutan kancadır. Bu sizin için bir anlam ifade etmiyorsa endişelenmeyin. Bu öğreticinin sonunda, kancalar hakkında sağlam bir kavrayışa sahip olacaksınız.

İki tür kanca vardır:

• Temel Kancalar
  1. Kullanım Durumu
  2. kullanım Etkisi
  3. kullanımBağlam
• Ek Kancalar
  1. kullanımRef
  2. not kullan
  3. kullanımRedüktör

kullanım Durumu()

NS Kullanım Durumu kanca durumu yönetmeye yardımcı olur. React geliştirmede daha önce, durum yönetimi sınıflar kullanılarak yapılıyordu. Durum sözdizimi yapıcının içine yazılmıştır ve Bugün nasılsın anahtar kelime. React kancalarının kullanıma sunulmasıyla geliştiriciler, işlevsel bileşenleri kullanarak durumu yönetme özgürlüğüne sahiptir.

React kancalarının sözdizimi için önceki örneğe başvurabilirsiniz. Açıklamak için en basit örnek kullanım Durumu() sayma değişkeni örneğidir:

{useState}'i "tepki"den içe aktar;
işlev Uygulama() {
const [sayım, setCount] = useState (0);
dönüş (


Kanca örneği

{saymak}

setCount (count+1)}>Ekle
setCount (count-1)}>Çıkar



);
}

NS Kullanım Durumu hook, değişkenin değerini ayarlamak için kullanılan bir değişkene ve yönteme sahiptir. NS Kullanım Durumu hook, durumun ilk değerini parametre olarak kabul eder. kullanarak sayı değişkeni için herhangi bir değer ayarlayabilirsiniz. setCount yöntem.

Yukarıdaki kodda, değeri artırmak ve azaltmak için iki düğme vardır. saymak değişken. Arttırırken, mevcut sayım durumuna +1 ve sayımı 1 azaltmak için -1 ekleyebilirsiniz.

kullanım Etkisi

NS kullanım Etkisi kanca, durumdaki her değişiklikten sonra web sayfasındaki durumu günceller. NS kullanım Etkisi sınıf tabanlı bileşenlerin yan etkilerini ortadan kaldırmak için kanca tanıtıldı. İşlev tabanlı bileşenlerin kullanıma sunulmasından önce, yaşam döngüsü bileşenleri kullanılarak durum değişiklikleri izlendi: bileşenDidMount ve componentDidUpdate. NS kullanım Etkisi kanca bir bağımlılık dizisini kabul eder. Bağımlılık dizisinde belirtilen durum değişkenlerindeki tüm değişiklikler, aşağıdakiler kullanılarak izlenir ve görüntülenir. kullanım Etkisi kanca.

kullanmanın klasik bir örneğidir. kullanım Etkisi kanca bir API'den veri alma veya bir gönderideki beğenileri veya abonelikleri hesaplamak.

useEffect(()=>{
// kod
},[bağımlılık dizisi]);

Yukarıdaki örnek dikkate alındığında

"tepki" den { useState, useEffect } içe aktar;
işlev Uygulama() {
const [sayım, setCount] = useState (0);
useEffect(() => {
document.title = `${count} kere tıkladınız`;
}, [saymak]);
dönüş (


Kanca örneği

{saymak}

 setCount (sayım + 1)}>Ekle



);
}

geçerken saymak durum değişkeni kullanım Etkisi bağımlılık dizisi, durumun değişip değişmediğini kontrol eder. Daha sonra belge başlığını sayı değişkenine ayarlar.

kullanımBağlam

NS kullanımBağlam kanca, verileri aksesuarlar aracılığıyla manuel olarak yapmadan bileşenden geçirmeye yardımcı olur. Context API'yi kullanmayı hızlı ve kolay hale getirir. Bir örnek üzerinden geçtikten sonra daha iyi anlayacaksınız.

İlk olarak, Context kullanmadan kodun nasıl göründüğünü anlayın. Gördüğünüz gibi, metni props aracılığıyla alt bileşene iletmeniz gerekiyor. Karmaşıklıklardan kaçınmak için şunları kullanabilirsiniz: kullanımBağlam kanca.

varsayılan işlevi dışa aktar App() {
let text = "Merhaba, MUO'ya Hoş Geldiniz";
dönüş (






);
}
const ChildComponent = ({ metin }) => {
dönüş 
{Metin}
;
};

Öncelikle, ana dosyanızda bir Sağlayıcı oluşturun (App.js).

const Bağlam = React.createContext (boş);

NS Uygulama bileşen, üst düzey bileşen veya "ana" bileşendir. Bileşenin tamamını içine sarmanız gerekir. ve oluşturmak istediğiniz nesneyi veya verileri alt bileşene iletin.

varsayılan işlevi dışa aktar App() {
let text = "Merhaba, MUO'ya Hoş Geldiniz";
dönüş (








);
}

Şimdi, bir alt bileşen oluşturun ve metin desteğine şu komutu kullanarak erişin: kullanımBağlam kanca. Geç Bağlam kullanarak değişken içerik oluştur.

const ChildComponent = () => {
let metin = useContext (Bağlam);
konsol.log (metin);
dönüş 
{Metin}
;
};

İlgili: Öğrenmeye Değer JavaScript Çerçeveleri​​​​​

React ile Keşfedilecek Daha Çok Şey

Kancaların temellerini yeni öğrendiniz. React'in en iyi özelliklerinden biridir ve oldukça geliştirici dostudur. React, iş fırsatları, tek sayfalık uygulamalar oluşturmak veya sadece programlama bilginizi genişletmek için bugün öğrenebileceğiniz en iyi ön uç çerçevelerinden biridir.

Bilginizi genişletmekten bahsetmişken, durumu yönetmek, React geliştiricilerinin uygulaması gereken yalnızca bir beceridir. Sahne donanımı gibi diğer önemli özellikler de en az sizin kadar ilginizi hak ediyor.

ReactJS'de Props Nasıl Kullanılır

ReactJS'de sahne malzemelerinin nasıl kullanılacağına dair ipuçları arıyorsanız doğru yerdesiniz.

Sonrakini Oku

Yazar hakkında