React Hook'lar, bir React sınıfı bileşeni oluşturmak zorunda kalmadan durum ve diğer React özelliklerini kullanmanıza izin verir. Kancaları kullanarak, tamamen işlevsel React uygulamalarını yalnızca Function Components ile oluşturabilirsiniz. Artık class Example extends React.component {}gerekli değil.

Temel Kancalar

Günlük kullanım durumları için günlük kancalar.

React Basic Kancaları
- useEffect
- useState => Bu Makale
- useContext => Çok Yakında

kullanımDevlet

useState için Resmi Belgeler

const [state, setState] = useState(initialState);

1. Başlangıç ​​hali

İki değer içeren bir dizi.

1. En son durum
2. Durumu yeni değerlere güncelleme işlevi

useStatebir başlangıç ​​değeri kabul eder ve iki değer döndürür: en son durum ve durumu güncelleme işlevi. Değerler bir dizi biçiminde döndürülür ve genellikle dizi yapı bozma sözdizimi kullanılarak okunur .

setStateeşzamansız bir işlevdir, bu nedenle tamamlanmasının zaman alabileceğini akılda tutmak çok önemlidir. Bazen yeni bir durum, önceki durumun hesaplanmasını gerektirir. setStateEski bir duruma dayalı olarak yeni bir durumun hesaplanması, döndürülen dizinin ikinci ( [1]javascript dizisinde) bağımsız değişkeninde sağlanan yönteme bir işlev iletilerek gerçekleştirilebilir . useStateve useEffectişlevlerinin her seferinde aynı sırada yürütüldüğünden emin olmak önemlidir . Eğer useStateve useEffectfonksiyonları aynı sırayla çalışmıyorsa, çok kötü bir zaman geçireceksiniz (aşağıda doğru sıralamayı gerçekleştirme hakkında daha fazla bilgi). İşlev sırası korunmadığında doğru hesaplamalarda iade edilecektir.

örnekler

Dönüş değerlerini anlamak useState.

Aşağıdaki kod birden çok şekilde ifade edilebilir.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Ayıları boğalara çevirmek.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Aşağıdaki kod önceki duruma 27 ekleyecektir.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Durum değişkenlerinin yavaş başlatılmasını anlama. React Docs Resmi Açıklaması.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Kişisel Web Sitesi
LinkedIn
Instagram