Реагировать на useState
крючок
React useState
Hook позволяет нам отслеживать состояние функционального компонента.
Состояние обычно относится к данным или свойствам, которые необходимо отслеживать в приложении.
Импортировать useState
Чтобы использовать useState
хук, нам сначала нужно добавить import
его в наш компонент.
Пример:
В верхней части вашего компонента файл import
Hook 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("")
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Состояние чтения
Теперь мы можем включить наше состояние в любом месте нашего компонента.
Пример:
Используйте переменную состояния в отображаемом компоненте.
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Обновить состояние
Чтобы обновить наше состояние, мы используем нашу функцию обновления состояния.
Мы никогда не должны напрямую обновлять состояние. Пример: color = "red"
не допускается.
Пример:
Используйте кнопку для обновления состояния:
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
Что может удержать государство
Крючок useState
можно использовать для отслеживания строк, чисел, логических значений, массивов, объектов и любой их комбинации!
Мы могли бы создать несколько обработчиков состояний для отслеживания отдельных значений.
Пример:
Создайте несколько хуков состояний:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
Или мы можем просто использовать одно состояние и вместо этого включить объект!
Пример:
Создайте один хук, который содержит объект:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
Поскольку теперь мы отслеживаем один объект, нам нужно сослаться на этот объект, а затем на свойство этого объекта при рендеринге компонента. (Пример: car.brand
)
Обновление объектов и массивов в состоянии
Когда состояние обновляется, все состояние перезаписывается.
Что, если мы хотим обновить только цвет нашей машины?
Если бы мы вызывали только setCar({color: "blue"})
, это удалило бы марку, модель и год из нашего состояния.
Мы можем использовать оператор распространения JavaScript, чтобы помочь нам.
Пример:
Используйте оператор распространения JavaScript, чтобы обновить только цвет автомобиля:
import { useState } from "react";
import ReactDOM from "react-dom";
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>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
Поскольку нам нужно текущее значение состояния, мы передаем функцию в нашу setCar
функцию. Эта функция получает предыдущее значение.
Затем мы возвращаем объект, распространяя previousState
и перезаписывая только цвет.