Прежде всего привет! Меня зовут Генри, и добро пожаловать в мою первую статью на Medium: знакомство с хуком React useState. Давайте начнем…

Крюки – это новое дополнение в React 16.8. Они позволяют вам использовать состояние и другие функции React без написания класса.

Эта цитата была взята непосредственно из документации introduction React Hooks и довольно лаконично описывает, что позволяют делать хуки.

В принципе, они классные. Но почему они классные? React имеет два основных типа компонентов. Компоненты класса и функциональные компоненты. Компоненты класса также называются компонентами с отслеживанием состояния. Причина этого в том, что до React 16.8 только компоненты класса могли управлять своим состоянием. Функциональные компоненты не могли управлять своим состоянием и не имели методов жизненного цикла.

React Hooks позволяют нам добавлять состояние и методы жизненного цикла в функциональный компонент ReactJS! И именно поэтому они классные! Нам больше не нужен весь раздутый код, который поставляется с компонентом класса!

Кроме того, React Hooks значительно упрощает код, необходимый для использования методов жизненного цикла. Но об этом в другой статье…

Прежде чем мы начнем, весь код, используемый в этом проекте, можно найти в этом Git.

Хорошо, отлично, но как это можно использовать на самом деле?

Чтобы продемонстрировать, как мы можем использовать хук, давайте создадим приложение, позволяющее пользователю вводить свое имя. Затем мы будем использовать это имя для печати «Hello, {name}».

Чтобы быстро приступить к работе, давайте загрузим приложение с помощью create-react-app. Для получения дополнительной информации о том, как работает create-react-app, нажмите здесь.

Как только вы это сделаете, давайте начнем с удаления стандартного HTML-кода приложения React, заменив его простым вводом и абзацем с текстом «Hello World».

import React from "react";
import "./App.css";
function App() {
    return (
        <div className="App">
            <header className="App-header">
                <input type="text" />
                <p>Hello World</p>
            </header>
        </div>
    );
}
export default App;

Хороший! Итак, мы предоставили пользователю возможность вводить текст и создали абзац с текстом «Hello World». Теперь нам нужно сохранить и обновить имя пользователя. Как мы это делаем? Давайте посмотрим на хук useState.

import React from "react";
import "./App.css";
function App() {
    const username = React.useState("Henry");
    return (
        <div className="App">
            <header className="App-header">
                <input type="text" />
                <p>Hello, {username}</p>
            </header>
        </div>
    );
}
export default App;

Здорово! В строке 5 мы используем хук useState. Хук useState можно использовать для объявления одной переменной состояния внутри функции. В приведенном выше примере этой переменной состояния является имя пользователя.

Мы могли бы просто вернуть одно значение, начальное значение, и использовать его в любом месте нашего кода. Но мы хотели бы, чтобы пользователь вводил свое имя.

Хук useState возвращает массив с двумя значениями, и мы можем использовать деструктуризацию массива для доступа к этим значениям. Первое значение в массиве является начальным значением. В данном примере это Генри. Второе значение — это ссылка на функцию, которая обновляет это значение.

import React from "react";
import "./App.css";
function App() {
    const [username, setUsername] = React.useState("Henry");
    return (
        <div className="App">
            <header className="App-header">
                <input
                    type="text"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                />
                <p>Hello, {username}</p>
            </header>
        </div>
    );
}
export default App;

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

В строке 10 мы обновили входные данные HTML value, чтобы они были переменной имени пользователя. Это означает, что значение нашего ввода HTML будет установлено на начальное значение нашего хука useState.

Строка 13 присваивает нашу функцию обновления из нашего хука useState событию onChange на нашем входе. Это означает, что всякий раз, когда пользователь изменяет значение нашего ввода, значение нашего состояния будет обновляться! Простой!

Когда мы запустим приложение и введем значение во входные данные, мы увидим текст, используемый в утверждении «Привет, {имя}»! Потрясающий!

Хук useState не ограничивается только строками. Его можно использовать с примитивными типами, такими как числа и логические значения. Его также можно использовать с непримитивными типами, такими как массивы и объекты. Поиграйте, чтобы увидеть, как это работает!

Сегодня мы создали HTML-форму и реализовали хук useState. Надеемся, что эта статья дала представление о том, как работает хук useState и как вы можете использовать его в своих приложениях. Любые отзывы о том, как это можно улучшить, или запросы на будущие статьи были бы замечательными!

Удачного кодирования!