React хук useState
Хук React useState дозволяє нам відстежувати стан у компоненті функції.
Стан зазвичай належить до даних або властивостей, які потрібно відстежувати в програмі.
Імпорт useState
Щоб використовувати хук useState, нам спочатку потрібно import (імпортувати) його в наш компонент.
Приклад:
У верхній частині компонента import хук useState.
import { useState } from "react";
Зверніть увагу, що ми деструктуруємо useState з react, оскільки це іменований експорт.
Щоб дізнатися більше про деструктуризацію, перегляньте розділ ES6.
Ініціалізувати useState
Ми ініціалізуємо наш стан, викликаючи useState у нашому компоненті функції.
useState приймає початковий стан і повертає два значення:
- Поточний стан
- Функція, яка оновлює стан
Приклад:
Ініціалізувати стан у верхній частині компонента функції.
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
Зверніть увагу, що знову ми деструктуруємо значення, які повертає useState.
Перше значення, color, це наш поточний стан.
Друге значення, setColor, це функція, яка використовується для оновлення нашого стану.
Ці імена є змінними, які можна назвати як завгодно.
Нарешті, ми встановлюємо початковий стан у порожній рядок: useState("")
Стан читання
Тепер ми можемо включити наш стан будь-де в наш компонент.
Приклад:
Використовуйте змінну стану у відтвореному компоненті.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Оновити стан
Щоб оновити наш стан, ми використовуємо нашу функцію оновлення стану.
Ми ніколи не повинні безпосередньо оновлювати стан. Наприклад: color = "red" заборонено.
Приклад:
Використовуйте кнопку для оновлення стану:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Що може мати стан?
Хук useState можна використовувати для відстеження рядків, чисел, логічних значень, масивів, об’єктів і будь-якої їх комбінації!
Ми могли б створити кілька хуків стану для відстеження окремих значень.
Приклад:
Створіть хуки з кількома станами:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Або ми можемо просто використати один стан і замість нього включити об’єкт!
Приклад:
Створіть один хук, який утримує об’єкт:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Оскільки ми зараз відстежуємо один об’єкт, нам потрібно посилатися на цей об’єкт, а потім на властивість цього об’єкта під час відтворення компонента. (Наприклад: car.brand)
Оновлення об’єктів і масивів у стані
Під час оновлення стану весь стан перезаписується.
Що робити, якщо ми хочемо лише оновити колір нашого автомобіля?
Якби ми викликали лише setCar({color: "blue"}), це видалило б марку, модель і рік випуску з нашого стану.
Ми можемо використовувати оператор поширення JavaScript, щоб допомогти нам.
Приклад:
Використовуйте оператор поширення JavaScript, щоб оновити лише колір автомобіля:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Оскільки нам потрібне поточне значення стану, ми передаємо функцію в нашу функцію setCar. Ця функція отримує попереднє значення.
Потім ми повертаємо об’єкт, розповсюджуючи previousState і перезаписуючи лише колір.
