javascript - Почему React Hook useState использует const и не позволяет




reactjs ecmascript-6 (2)

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

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

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

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

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

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

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


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

На самом деле, нет. Когда компонент перерисовывается, функция выполняется снова, создавая новую область видимости, создавая новую переменную 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

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







react-hooks