Warum React Hook verwenden useState verwendet const und nicht let

33

Die Standardmethode für die Verwendung eines React useState-Hooks ist die folgende:

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

Diese const countVariable wird jedoch eindeutig einem anderen primitiven Wert zugewiesen.

Warum ist die Variable dann nicht definiert als let count?

— Nacho
quelle

5

Wenn Sie den Status ändern, wird die Komponente eindeutig neu gerendert, oder? Wenn es also neu

— gerendert

3

Tatsächlich bleibt die Zählung im Rahmen der Funktion unveränderlich. Danke Kevin!

— Nacho

46

eindeutig einem anderen primitiven Wert zugeordnet werden

Nicht wirklich. Wenn die Komponente erneut gerendert wird, wird die Funktion erneut ausgeführt, wodurch ein neuer Bereich erstellt wird und eine neue countVariable erstellt wird, die nichts mit der vorherigen Variablen zu tun hat.

Beispiel:

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

Erweitern Sie das Snippet

Hinweis: Hooks sind weitaus ausgefeilter und werden nicht so implementiert. Dies dient nur dazu, ein ähnliches Verhalten zu demonstrieren.

— Felix Kling
quelle

2

const ist ein Schutz gegen die Neuzuweisung des Referenzwerts innerhalb desselben Bereichs.

Von MDN

Dies bedeutet nicht, dass der darin enthaltene Wert unveränderlich ist, sondern dass die Variablenkennung nicht neu zugewiesen werden kann.

Ebenfalls

Eine Konstante kann ihren Namen nicht mit einer Funktion oder einer Variablen im selben Bereich teilen.

— Tony
quelle

1

Primitive Werte sind jedoch unveränderlich. In der Frage geht es also eher darum zu erklären, warum sich eine konstante Zahl ändern kann.

— Fred Stark

0

Nach dem Aufruf von setCount wird die Komponente erneut gerendert und der neue Aufruf von useState gibt den neuen Wert zurück. Der Punkt ist, dass die Anzahl unveränderlich ist. Hier gibt es also keinen Tippfehler.

Technisch gesehen ist es bei jedem Rendern eine neue Variable.

Quelle: React Github Problem: Docs - Hooks: Ist das ein Tippfehler?

— Abido
quelle

0

hier fand ich, dass const frustrierend war, da sich die Anzahl so ändern muss

  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
quelle