React useState: bir özet

Son birkaç aydır React'e daldım ve bazı basit uygulamalar geliştirdim. Sindirmekte zorlandığım bir kavram React State kavramıdır . Geçenlerde, bunu açıkça açıklayan mükemmel bir öğreticiye (şiddetle tavsiye ederim) rastladım . Bu kısa yazıda, öğreticiyi takip ederken öğrendiğim en önemli kavramları özetlemeye çalışacağım, böylece başkalarına da yardımcı olabilir :-)

React'te durum nedir? Bir bileşenin durumu, belirli bir zamanda bileşenimiz içinde kullanılan ve oluşturulan verilerdir.

Aşağıdaki kodda bir değişken (iceCreamFlavor) oluşturuyoruz ve ona bir "çikolata" başlangıç ​​değeri atadık. Bu değişken, bileşen şablonumuzun içinde küme parantezleri {iceCreamFlavor} kullanılarak işlenir. “Beni tıkla” düğmesine tıkladığımızda dondurma aromasının “çikolata”dan “çilek”e dönüşmesini beklerdik…Sonuçta handleClick işlevi bunu yapar…

const MyComponent = () => {
let iceCreamFlavor = "chocolate";
const handleClick = () => {
iceCreamFlavor = "strawberry";
};
return (
<div className="container-style">
<h2>Ice cream flavor</h2>
<p>{iceCreamFlavor}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};

Değer değişir ancak bileşene işlenmez. Neden böyle?

Bunun nedeni, iceCreamFlavor'ın reaktif bir değişken olmaması ve bu nedenle değişikliğinin, bileşen şablonunu yeniden oluşturması için React'i tetiklememesidir.

Değeri reaktif hale getirmek için özel bir fonksiyon türü olan useState kancasını kullanmamız gerekiyor.

Yazarak:

useState("chocolate")

“çikolata”, küme parantezleri kullanılarak bileşen içinde oluşturulan ilk değerdir. Kanca henüz tamamlanmadı. Sonlandırmak için ayrıca ihtiyacımız var:

1. bu değeri saklamak için bir “yer”. Bu durumda “iceCreamFlavor” kullanacağız (bu değişken adının isteğe bağlı olduğunu unutmayın).
2. “iceCreamFlavor” değerini güncellemekten sorumlu olacak bir fonksiyon, bu durumda “setIceCreamFlavor”. Normalde fonksiyon adı “set” ile başlar ve ardından güncellediğimiz şeyin adı ne olursa olsun gelir.

const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)

const Home = () => {
  const [iceCreamFlavor, setIceCreamFlavor] = useState(“chocolate”)
  
  const handleClick = () => {
    setIceCreamFlavor("strawberry");
  };
return (
 <div className="container-style">
 <h2>Ice cream flavor</h2>
 <p>{iceCreamFlavor}</p>
 <button onClick={handleClick}>Click me</button>
 </div>
 );
};

1. handleClick işlevi tetiklenir.
2. setIceCreamFlavor da ateşlenir ve bu, dondurma lezzetini “çikolata”dan “çilek”e değiştirirken aynı zamanda şablonun yeniden oluşturulmasını tetikler.

Bu kanca hakkında birkaç yan not:

• useState bir bileşende istediğimiz kadar kullanılabilir.
• Bu kancayı kullanmak için, bileşenimizin başında aşağıdaki gibi içe aktarılması gerekir:

import { useState } from “react”;