Реагировать Учебник

Реагировать Главная Реагировать Введение Реагировать Начать Реагировать ES6 Реагировать на визуализацию HTML Реагировать JSX Реагировать Компоненты Реагировать на класс Реагировать на реквизиты Реагировать на события Реагировать на условия Реагировать списки Реагировать на формы Реактивный маршрутизатор Реагировать на заметку Реагировать на стили CSS Реагировать на стиль Sass

Реагировать на крючки

Что такое крючок? использование состояния использованиеЭффект использованиеконтекста useRef использованиередьюсер использоватьОбратный звонок useMemo Пользовательские крючки

Упражнения по реагированию

Ответная викторина Упражнения по реагированию Сертификат реакции

Реагировать на useStateкрючок


React useStateHook позволяет нам отслеживать состояние функционального компонента.

Состояние обычно относится к данным или свойствам, которые необходимо отслеживать в приложении.


Импортировать useState

Чтобы использовать useStateхук, нам сначала нужно добавить importего в наш компонент.

Пример:

В верхней части вашего компонента файл importHook 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("")


w3schools CERTIFIED . 2022

Получите сертификат!

Завершите модули React, выполните упражнения, сдайте экзамен и получите сертификат w3schools!!

ЗАПИСАТЬСЯ НА 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и перезаписывая только цвет.


Проверьте себя с помощью упражнений

Упражнение:

Заполните этот оператор, чтобы отслеживать переменную count с помощью хука useState.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}