В React состояния хранятся и управляются с помощью хуков состояния, таких как useState.
Хранение состояний осуществляется внутри компонентов. При создании компонента React создает виртуальный DOM, который содержит информацию о текущем состоянии компонента и его свойствах. Когда состояние компонента изменяется, React обновляет только соответствующие части виртуального DOM и эффективно обновляет реальный DOM, чтобы отобразить новое состояние пользователю.
Пример использования useState:
import React, { useState } from 'react';
const ExampleComponent = () => {
// Определение состояния с помощью useState
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<h1>Счетчик: {count}</h1>
<button onClick={incrementCount}>Увеличить</button>
</div>
);
};
В этом примере useState используется для создания состояния count со значением 0. Метод setCount, возвращаемый хуком состояния, позволяет обновлять значение состояния. Внутри компонента создается кнопка, нажатие на которую вызывает функцию incrementCount, которая увеличивает значение count на 1 при каждом клике. Значение состояния count отображается внутри заголовка h1, который автоматически обновляется при изменении состояния.