Чому React Hook useState використовує const, а не дозволяє

33

Стандартний спосіб використання React useState Hook полягає в наступному:

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

Однак ця const countзмінна, очевидно, буде перенесена на інше примітивне значення.

Чому тоді змінна не визначається як let count?

— Начо
джерело

5

Якщо ви зміните стан, компонент буде чітко відображатись правильно? Тож якщо вона повторно відобразиться, кількість ніколи не буде "переназначена"

— Kevin.a

3

Дійсно, в області функцій кількість залишається незмінною. Дякую Кевін!

— Начо

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

Примітивні значення, однак, незмінні, тому питання стосується більше пояснення того, яким чином може змінитися число констату?

— Фред Старк

0

Після виклику setCount компонент відновлюється, а новий виклик useState повертає нове значення. Справа в тому, що підрахунок незмінний. Так що друку тут немає.

Технічно це нова змінна при кожному візуалізації.

Джерело: React Github issue: Docs - Hooks: це те, що друкується помилка?

— Абідо
джерело

0

тут я виявив, що const засмучує, оскільки підрахунок повинен так змінитися

  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
джерело