Почему функция useState не инициализирует состояние каждый раз?

Question

import React, { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count {count}</button>
    </div>
  );
}

export default HookCounter;

React вызывает эту функцию каждый раз, когда необходимо выполнить повторную визуализацию.

Но почему она не инициализирует состояние каждый раз?

При выходе из функции жизньпеременных завершено, не так ли?

Но как сохранить значения состояний?

Я не понимаю.

В useState функции, есть ли логика для этого?

Answer 1

useState как функция хранит значение, которое вы дали ему в ядре React. При повторном рендеринге компонента React собирается передать обновленный счетчик из своего ядра в компонент.

Дополнительная информация здесь .

Answer 2

Состояние инициализируется только один раз при создании компонента, так работает React. Из документации:

Что делает вызов useState? Он объявляет «переменную состояния». Обычно переменные «исчезают» при выходе из функции, но переменные состояния сохраняются в React.

Просто для того, чтобы получить здесь контекст, позвольте мне вкратце подытожить, что такое useState и как это работает.

Что такое useState:

Итак, useState - это ловушка, которая помогает вам обрабатывать состояние в функциональном компоненте.

Как это работает?

После того, как вы позвоните useState, вам нужно передать начальное значение состояния, которое вы хотели бы использовать в своем функциональном компоненте. Он возвращает пару значений count и setCount.

Итак, давайте рассмотрим ваш пример ниже:

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

Итак, useState вернул два элемента, где count - этотекущая стоимость. И второй элемент, setCount - это функция, которая может использоваться для обновления значения состояния count.

count может использоваться для представления состояния, например, значение в div element:

return (
   <div>{count}</div>
)

Чтобы обновить значение, которое вы можете получить, позвонив по номеру setState(12).

Из документов вы можете прочитать далее здесь .

Answer 3

Почему функция useState не инициализирует State каждый раз?

Я думаю, вы запутались с:

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

Поскольку это просто переменная !? !

Да, это просто переменная, но она будет выполняться каждый раз, когда функция запускается из ловушки useState. И это локальное состояние, как вы видели в компоненте на основе классов.