Tepki Kancaları

16.8 sürümünde React'e kancalar eklendi.

Kancalar, fonksiyon bileşenlerinin durum ve diğer React özelliklerine erişmesine izin verir. Bu nedenle, sınıf bileşenlerine artık ihtiyaç duyulmaz.

Hook'lar genellikle sınıf bileşenlerini değiştirse de, sınıfları React'ten kaldırma planı yoktur.

Kanca nedir?

Kancalar, durum ve yaşam döngüsü yöntemleri gibi React özelliklerine "bağlanmamıza" izin verir.

Örnek:

İşte bir Kanca örneği. Mantıklı gelmiyorsa endişelenme. Bir sonraki bölümde daha fazla ayrıntıya gireceğiz .

import React, { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

import'den Hooks gerekir react.

Burada useStateuygulama durumunu takip etmek için Hook'u kullanıyoruz.

Durum genellikle, izlenmesi gereken uygulama verilerini veya özelliklerini ifade eder.

Kanca Kuralları

Kancalar için 3 kural vardır:

Kancalar yalnızca React işlevi bileşenlerinin içinde çağrılabilir.
Kancalar yalnızca bir bileşenin en üst düzeyinde çağrılabilir.
Kancalar koşullu olamaz

Not: Kancalar, React sınıfı bileşenlerinde çalışmayacaktır.

Özel Kancalar

Birkaç bileşende yeniden kullanılması gereken durum bilgisi olan bir mantığınız varsa, kendi özel Kancalarınızı oluşturabilirsiniz.

Özel Kancalar bölümünde daha fazla ayrıntıya gireceğiz .

❮ Öncesi Sonraki ❯

Tepki Eğitimi