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

Хуки были добавлены в React в версии 16.8.

Хуки позволяют функциональным компонентам иметь доступ к состоянию и другим функциям React. Из-за этого компоненты класса, как правило, больше не нужны.

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

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

Хуки позволяют нам «зацепиться» за такие функции React, как методы состояния и жизненного цикла.

Пример:

Вот пример хука. Не волнуйтесь, если это не имеет смысла. Мы рассмотрим более подробно в следующем разделе .

import React, { 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>
      <button
        type="button"
        onClick={() => setColor("red")}
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("pink")}
      >Pink</button>
      <button
        type="button"
        onClick={() => setColor("green")}
      >Green</button>
    </>
  );
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Вы должны importхуки из react.

Здесь мы используем useStateхук для отслеживания состояния приложения.

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

Правила хука

Есть 3 правила для крючков:

Хуки можно вызывать только внутри функциональных компонентов React.
Хуки можно вызывать только на верхнем уровне компонента.
Хуки не могут быть условными

Примечание. Хуки не будут работать в компонентах класса React.

Пользовательские крючки

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

Подробнее мы поговорим в разделе « Пользовательские хуки» .

❮ Предыдущий Следующий ❯

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