useState vs useReducer

Hangi durumlarda useReducer'ın tercih edileceğini öğrenirsin.

useState vs useReducer

Hangisini seçeceğin state'in karmaşıklığına bağlıdır. Tek bir sayı veya metin için useState yeter; birkaç ilişkili alan veya çok sayıda geçiş varsa useReducer temizdir.

useReducer mantığı tek yerde toplar; test ederken bileşene gerek kalmaz. useState ise daha az satır ve daha az kavram gerektirir.

İkisi de eşit derecede hızlıdır; seçim okunabilirliğe bağlıdır.

Geçiş tablosu

useReducer'ın gücü, geçişlerin bir tablo gibi okunabilmesidir. Her aksiyon türü yeni bir state üretir; bu, hata ayıklamayı kolaylaştırır.

useState'te mantık handler'ların içine dağılır; bir hatayı bulmak birden çok fonksiyona bakmayı gerektirir.

İleride Redux gibi kütüphaneler aynı reducer modelini genişletecek; temeli burada öğrenmek önemlidir.

Uygulama Çift yollu sayaç

Aşağıdaki iskeleti tamamla. reducer fonksiyonu yaz; switch(action.type) içinde case "up": return state + 1;, case "down": return state - 1; ve default: return state; olsun. Counter bileşeni yaz; useReducer'ı içe aktar, const [state, dispatch] = useReducer(reducer, 0); tanımla. <button onClick={() => dispatch({type: "up"})}>{state}</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "up": return state + 1;
    case "down": return state - 1;
    default: return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  return <button onClick={() => dispatch({ type: "up" })}>{state}</button>;
}

export default Counter;

Kendini test et

Birkaç ilişkili alan ve çok geçiş varsa en iyi seçim?
```
useReducer collects logic in one place.
```
- useReducer
- useRef
- useState
- prop
Cevabı göster

useReducer — useReducer karmaşık geçişleri toplar.

useState vs useReducer: eksik parçayı tamamla

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

Cevabı göster

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

useState vs useReducer: kavramları eşleştir

useState

Basit state
useReducer

Karmaşık state
dispatch

Aksiyon gönderir
reducer

Saf fonksiyon

Sıradaki ders: Özet - useReducer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler