React + useState () + previousState

Question

UseState Hook'u veya daha spesifik olarak previousState'in yönünü anlamakta sorun yaşıyorum ve tepki vermekte oldukça yeniyim .

Normal bir useState Hook ve muhtemelen en yaygın örnek şuna benzer:

import React, { useState} from 'react';

export default function CounterHooks({ initialCount }){
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <button onClick={() => setCount(count -1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

Şu ana kadar anladığım şey şudur:

• UseState () işlevini / Hook? ve ilk State argümanını (initialCount) iletin
• Hemen count ve setCount değişkenlerine (fonksiyon olan) imha ettiğim bir diziyi geri alıyorum
• SetCount () ile durumu ve dolayısıyla count değişkenini güncelleyebilirim

Şimdiye kadar çok iyi, sanırım ...;)

Bazen, anlamadığım prevState (prevCount) ile aynı sayaç örneğini görüyorum:

<button onClick={() => setCount(prevCount => prevCount -1)}>-</button>

Burada ne oluyor? Bu kısmı anlamıyorum. Şimdiye kadarki düşüncelerim:

• Bu durumda, bir şekilde önceki sayım değerine erişiyorum.
• setCount şimdi bir işlev bekliyor
• setCount artık eşzamansız çalıştırılıyor
• Bu işlev nereden geliyor?
• PrevCount nereden geliyor?
• Bunu çalıştırdığımda prevCount'a ne eklenir?

Benim kafa karışıklığımı anlıyor musun? Bunu nasıl farklı bir şekilde çerçevelemem gerektiğinden emin değilim ...

Yardımın için çok teşekkürler.

Answer 1

Öncelikle resmi açıklamayı burada görebilirsiniz .

Bu durumda, bir şekilde önceki sayım değerine erişiyorum.

Bir şekilde önceki sayım değerine erişmiyorsunuz. İşlevsel bir güncelleme kullanır ve ayarlayıcıya bir geri arama işlevi verirseniz, önceki durumu size döndürür ve bu değeri geri arama işlevinizde kullanırsınız.

setCount şimdi bir işlev bekliyor

Bir işlev sağladığınız için onu kullanabilir.

setCount artık eşzamansız çalıştırılıyor

Aslında hayır. Eşzamansız bir işlev değildir. Sadece önceki durumu sağlar ve onu kullanırsınız. Durum belirleyicileri asenkron değildir, durum güncellemesi.

Bu işlev nereden geliyor?

PrevCount nereden geliyor?

Zaten cevaplandı.

Bunu çalıştırdığımda prevCount'a ne eklenir?

Orada yeni durumun ayarlanmasını istediğinizi sağlarsınız. Örneğinizde count, 1 artırmak istiyorsunuz , yani+ 1

İşte bu mantık için saf bir açıklama. Sadece saf bir tane. Geri arama mantığını örneklemek için bunu ekliyorum, bu React'inki ile ilgili değilsetState.

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    return val(state);
  }

  return val;
}

const stateWithFunctionalUpdate = setState(prev => prev + 1);
const stateWithNormalUpdate = setState(9);
console.log(stateWithFunctionalUpdate);
console.log(stateWithNormalUpdate);

Belki bu örnek, React'in durum ayarlama mantığını taklit etmek için uygun olabilir. Yine, sadece saf bir yaklaşım.

let state = 5;

function setState(val) {
  if (typeof val === "function") {
    state = val(state);
  } else {
    state = val;
  }

}

setState(9);
setState(prev => prev + 1);

console.log("state", state);

En atalım gerçek uygulanması arasında useState(typings olmadan):

export function useState(initialState) {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    initialState
  );
}

Sadece useReducerperde arkasında kullanıyor . Başlangıç ​​durumunu ayarlar ve basicStateReducer'ı kullanır :

function basicStateReducer(state, action) {
  return typeof action === "function" ? action(state) : action;
}

Naif yaklaşımımız gibi, türüne bakar ve ona actiongöre davranır. Son olarak, şunu useReducer döndürür :

return [workInProgressHook.memoizedState, dispatch];

Yani günün sonunda, bir fonksiyon sağlarsak useState, onu alır ve sonra bizim durumumuzda çalıştırır ve değeri geri döndürür.

Answer 2

İşte benim fikrim nasıl anladığım:

Bu durumda, bir şekilde önceki sayım değerine erişiyorum. -> setCount, param'ı kontrol eder, eğer param bir geriçağırım ise, o aramayı geri çağırır ve param için önceki durumu geçirir. Geri aramanın sonucu sonraki durum olacak.

setCount şimdi bir işlev bekliyor -> evet, işlev mantığınızı yönetir ve sonraki duruma geri döner.

setCount artık eşzamansız çalıştırılır -> bu işlev eşzamanlıdır ancak sonuçtan sonra döner. SetCount için kanca, bir sonraki durumu güncellemek için olay gönderir

Bu işlev nereden geliyor? -> param geçerli durum olduğu ve bir sonraki duruma döndüğü sürece işlevde her şeyi yapabilirsiniz.

PrevCount nereden geliyor? -> setCount çağrıldığında geçilecektir (mevcut durumdan alınır).

Bunu çalıştırdığımda prevCount'a ne eklenir? -> setCount'un mevcut durumu.

=> Bir değerin nasıl iletileceğine veya setCount'a nasıl geri çağrılacağına dair örnek: useState hook, setState işlevi. Önceki durum değerine erişim