Посібник із використання useState у React
Ваша панель пароля змінюється зі «слабкої» на «сильну» під час введення. React запам'ятовує те, що ви друкуєте, за допомогою стану.
Стан зберігає дані. Він відстежує те, що ви вводите або на що натискаєте.
Уявіть, що ви вводите своє ім'я.
- Ваш початковий стан — це порожній рядок.
- Ви вводите J.
- Ви викликаєте функцію, щоб оновити стан із "" на "J".
- Ви вводите o.
- Ви викликаєте функцію, щоб змінити стан на "Jo".
Щоразу, коли ви оновлюєте стан, React повторно рендерить UI. Повторний рендеринг означає, що React очищує старий вигляд і малює новий із вашими оновленими даними.
Чому не використовувати звичайні змінні? Звичайна змінна змінюється у вашому коді, але не оновлює екран. Ваші користувачі бачитимуть застарілі дані. Стан React вирішує цю проблему, пов'язуючи ваші дані з вашим UI.
Як використовувати useState:
Імпортуйте його з React.
import { useState } from 'react';Оголосіть його.
const [age, setAge] = useState(20);
У цьому прикладі:
- age — це ваше поточне значення.
- setAge — це функція для зміни значення.
- 20 — це ваше початкове значення.
Спробуйте це прямо зараз. Відкрийте проєкт React. Створіть лічильник. Натисніть кнопку, щоб оновити значення. Подивіться, як екран миттєво змінюється.
Джерело: https://dev.to/kaleablemmadev/usestate-in-react-a-beginners-guide-1j8i