Почему 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: это опечатка?

— Abido
источник

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
  };

— urfx
источник