крючок useState

Что такое крючки?

Крючки — это новинка! Эта функция была введена в React 16.8. Она позволяет вам использовать состояние и другие функции React без написания класса. Хуки — это функции, которые «подключаются» к функциям React. Они не работают внутри классов.

Когда следует использовать State против реквизитов?

Выбор между использованием state и props сводится к вопросу «кому принадлежат эти данные?». Если данными управляет один компонент, но другому компоненту нужен доступ к этим данным, вы передадите данные от одного компонента другому компоненту через props.

Если компонент сам управляет данными, он должен использовать state для управления ими.

Пример

Я собираюсь показать, как использовать состояние в простом приложении cookie clicker.

Объявление состояния

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "cookies"
  const [cookies, setCookies] = useState(0);
Вход в полноэкранный режим Выход из полноэкранного режима

Что делает объявление состояния?

Оно объявляет «переменную состояния» и функцию обратного вызова. Наша переменная называется cookies, но вы можете назвать ее как угодно. Функция setCookies установит новое значение cookies. Это способ «сохранить» некоторые значения между вызовами функций. Обычно переменные «исчезают» при выходе из функции, но переменные состояния сохраняются React. Мы передаем 0 в useState, чтобы установить наше «начальное состояние». Это означает, что счетчик кликов на печенье будет начинаться с 0.

Как отобразить текущее состояние

Если мы хотим отобразить текущее количество куки, которое у нас есть, мы можем использовать cookies напрямую:

<p>You have {cookies} cookies!</p>
Войдите в полноэкранный режим Выйти из полноэкранного режима

Как обновить состояние

  <button onClick={() => setCookies(cookies + 1)}>
    Click for Cookie!
  </button>
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот и все!

 1:  import React, { useState } from 'react';
 2:
 3:  function Example() {
 4:    const [cookies, setCookies] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You have {cookies} cookies!</p>
 9:        <button onClick={() => setCookies(cookies + 1)}>
10:         Click for Cookie!
11:        </button>
12:      </div>
13:    );
14:  }
Войти в полноэкранный режим Выход из полноэкранного режима
  • Мы импортируем хук useState из react. Так мы отслеживаем состояние в нашей функции.
  • Мы объявляем состояние, вызывая наш хук useState, присваиваем нашей переменной состояния и функции обратного вызова имя и инициализируем состояние, передавая 0, указывая, что мы начинаем без cookies.
  • Затем, когда пользователь нажимает на кнопку, мы вызываем setCookies с новым значением. Затем React повторно отобразит компонент Example, передав ему новое значение cookies.

Оцените статью
devanswers.ru
Добавить комментарий