Прежде чем углубляться в переменные состояния, давайте разберемся, что заставляет компонент React работать!

Что такое React-компонент?

В React компонент — это многократно используемый фрагмент кода, который представляет собой часть вашего пользовательского интерфейса (UI). Это может быть просто кнопка HTML или сложно, например целая страница.

Что такое переменные состояния в React??

В React переменная состояния — это переменная специального типа, в которой хранятся данные, специфичные для компонента.

Зачем нам нужны переменные состояния??

В React компоненты — это строительные блоки приложений React. Они могут быть функциональными или основанными на классах. Когда мы говорим «функциональный компонент», они обычно возвращают элементы Node или JSX (специальный синтаксис, который выглядит как HTML, но на самом деле представляет собой код JavaScript). Чтобы отобразить контент в браузере, React просто вызывает функциональный компонент, визуализирующий элементы. Каждый раз, когда компонент/функция вызывается/отрисовывается, его переменные повторно объявляются и повторно инициализируются. Это не позволяет компоненту сохранять любые изменения, внесенные в его данные. Обычных переменных JavaScript недостаточно, поскольку они не сохраняются при повторной отрисовке (вызове функции).

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

Чтобы решить эту проблему, команда React нашла решение? называется переменной состояния.

Используйте переменную состояния, когда компоненту необходимо «запомнить» некоторую информацию между рендерингами. переменные состояния объявляются путем вызова хука useState.

Эти переменные позволяют компонентам React управлять и хранить данные, которые изменяются со временем. В отличие от обычных переменных, переменные состояния по умолчанию неизменяемы и могут быть обновлены только с помощью их функции обновления состояния. Эта функция запускает повторную визуализацию компонента всякий раз, когда их значение изменяется. Такое динамическое поведение позволяет компонентам React возвращать активные обновления данных и обеспечивать идеальный пользовательский опыт. React отслеживает изменения, внесенные в переменные состояния. При обнаружении изменения React автоматически повторно отображает дерево DOM, используя процесс, называемый согласованием.

Готовы погрузиться глубже?

Дополнительные ресурсы:
Указать память компонента

Надеюсь, это поможет! Дайте мне знать, если у вас есть какие-либо вопросы или вам нужны дополнительные разъяснения. Поделитесь своими отзывами и предложениями.