Почему React Hook useState использует const, а не let


33

Стандартный способ использования React useState Hook заключается в следующем:

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

Однако эта const countпеременная явно будет переназначена на другое примитивное значение.

Почему тогда переменная не определена как let count?


5
Если вы измените состояние, компонент будет явно перерисован правильно? Так что, если он будет перерисован, счетчик никогда не будет «переназначен»
Kevin.a

3
Действительно, в объеме функции count остается неизменным. Спасибо, Кевин!
Начо

Ответы:


46

явно будет переназначен на другое примитивное значение

На самом деле, нет. Когда компонент перерисовывается, функция выполняется снова, создавая новую область видимости, создавая новую countпеременную, которая не имеет ничего общего с предыдущей переменной.

Пример:

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

Примечание: хуки намного сложнее и на самом деле не реализованы так. Это просто для демонстрации похожего поведения.


2

const является защитой от переназначения значения ссылки в той же области видимости.

От MDN

Это не означает, что значение, которое оно содержит, является неизменным, просто то, что идентификатор переменной не может быть переназначен.

Также

Константа не может делиться своим именем с функцией или переменной в той же области видимости.


1
Примитивные значения неизменны, поэтому вопрос заключается в объяснении того, как может измениться число const?
Фред Старк

0

После вызова setCount компонент перерисовывается, и новый вызов useState возвращает новое значение. Дело в том, что количество является неизменным. Так что здесь нет опечатки.

Технически это новая переменная при каждом рендере.

Источник: React Github: Docs - Hooks: это опечатка?


0

здесь я обнаружил, что const расстраивает, так как count нужно изменить так

  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
  };
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.