Dlaczego React Hook useState używa const, a nie let

33

Standardowy sposób korzystania z React useState Hook jest następujący:

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

Jednak ta const countzmienna zostanie wyraźnie przypisana do innej pierwotnej wartości.

Dlaczego zatem zmienna nie jest zdefiniowana jako let count?

— Nacho
źródło

5

Jeśli zmienisz stan, komponent wyraźnie zrenderuje się, prawda? Więc jeśli ponownie renderuje, liczba nigdy nie zostanie „przypisana”

— Kevin.a

3

Rzeczywiście, w zakresie funkcji liczba pozostaje niezmienna. Dzięki, Kevin!

— Nacho

46

wyraźnie zostanie przypisany do innej pierwotnej wartości

Nie całkiem. Gdy komponent jest ponownie generowany, funkcja jest wykonywana ponownie, tworząc nowy zakres, tworząc nową countzmienną, która nie ma nic wspólnego z poprzednią zmienną.

Przykład:

let _state;
let _initialized = false;
function useState(initialValue) {
  if (!_initialized) {
    _state = initialValue;
    _initialized = true;
  }
  return [_state, v => _state = v];
}

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

  console.log(count);
  setCount(count + 1);
}

Component();
Component(); // in reality `setCount` somehow triggers a rerender, calling Component again
Component(); // another rerender

Rozwiń fragment kodu

Uwaga: Haczyki są o wiele bardziej wyrafinowane i nie są tak zaimplementowane. Ma to na celu jedynie wykazanie podobnego zachowania.

— Felix Kling
źródło

2

const chroni przed ponownym przypisaniem wartości referencji w tym samym zakresie.

Z MDN

Nie oznacza to, że wartość, którą posiada, jest niezmienna, po prostu nie można przypisać identyfikatora zmiennej.

Również

Stała nie może dzielić swojej nazwy z funkcją lub zmienną w tym samym zakresie.

— Tony
źródło

1

Wartości pierwotne są jednak niezmienne, więc chodzi raczej o wyjaśnienie, w jaki sposób liczba stała może się zmienić?

— Fred Stark,

0

Po wywołaniu setCount składnik jest ponownie wysyłany, a nowe wywołanie useState zwraca nową wartość. Chodzi o to, że liczba jest niezmienna. Więc nie ma tu literówki.

Technicznie jest to nowa zmienna przy każdym renderowaniu.

Źródło: React Github problem: Dokumenty - Haki: czy to literówka?

— Abido
źródło

0

tutaj odkryłem, że const był frustrujący, ponieważ liczba musi się zmienić

  let [count, setCount] = useState(0)
  // simply can't use ++ on either side of count increment given we declare as const [count, setCount] 
  // instead declaration of var or let [count, setCount] allows simpler code
  const increment = () => {
    setCount(count++); //const cannot do this only let or var
  };

— urfx
źródło