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:

const Example = (props) => {
  // You can use Hooks here!
  return <div />;
}

veya bu:

function Example(props) {
  // You can use Hooks here!
  return <div />;
}

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.

Hooks Nedir?

Yeni örneğimiz, useStateHook'u React'tan içe aktararak başlıyor:

import React, { useState } from 'react';
function Example() {
  // ...
}

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 .

Durum Değişkeni Bildirmek

Bir sınıfta, yapıcıda ayarını yaparak countdurumu başlatırız:0this.state{ count: 0 }

class Example extends React.Component {
  constructor(props) {
    super(props);
    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 :

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

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ı:

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);

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 .

Okuma Durumu

Bir sınıftaki mevcut sayıyı görüntülemek istediğimizde şunu okuruz this.state.count:

  <p>You clicked {this.state.count} times</p>

countBir fonksiyonda doğrudan şunları kullanabiliriz :

  <p>You clicked {count} times</p>

Durum Güncelleniyor

Bir sınıfta durumu this.setState()güncellemek için çağrı yapmamız gerekir count:

  <button onClick={() => this.setState({ count: this.state.count + 1 })}>    Click me
  </button>

Bir fonksiyonda zaten setCountve countdeğişkenlerimiz var, dolayısıyla ihtiyacımız yok this:

  <button onClick={() => setCount(count + 1)}>    Click me
  </button>

Özet

Şimdi öğrendiklerimizi satır satır özetleyelim ve anlayıp anlamadığımızı kontrol edelim.

 1:  import React, { useState } from 'react'; 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0); 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

• Satır 1:useState Hook'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.

İpucu: Köşeli Parantez Ne Anlama Gelir?

Bir durum değişkeni bildirdiğimizde köşeli parantezleri fark etmiş olabilirsiniz:

  const [count, setCount] = useState(0);

Soldaki adlar React API'nin bir parçası değildir. Kendi durum değişkenlerinizi adlandırabilirsiniz:

  const [fruit, setFruit] = useState('banana');

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:

  var fruitStateVariable = useState('banana'); // Returns a pair
  var fruit = fruitStateVariable[0]; // First item in a pair
  var setFruit = fruitStateVariable[1]; // Second item in a pair

İ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 .

İpucu: Birden Çok Durum Değişkenini Kullanma

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:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

Yukarıdaki bileşende yerel değişkenler olarak age, fruit, ve var todosve bunları ayrı ayrı güncelleyebiliriz:

  function handleOrangeClick() {
    // Similar to this.setState({ fruit: 'orange' })
    setFruit('orange');
  }

Ç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

• https://legacy.reactjs.org/docs/hooks-state.html