Введение — JS: React Hooks

Хуки, механизм в React, который позволяет работать полностью без классов. Он не приносит ничего нового, но облегчает повторное использование кода для решения общих задач. Сейчас это основной способ написания React приложений. Но хуки не заменяют собой классы целиком. Более того команда React не планирует удалять поддержку классов, а кое-что без классов сделать не получится. Пример работы хука useState для хранения состояния:

// useState – встроенный в React хук
// Подробнее рассматривается в следующем уроке
import React, { useState } from 'react';

const Example = () => {
  // Пример хука для работы с состоянием
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы нажали {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
};

See the Pen js_react_hooks_use_effect-1 by Hexlet (@hexlet) on CodePen.

Хуки это функции, имена которых принято начинать с use. Так их легко отличить от любых других функций. В React встроено около 10 хуков из которых только несколько используются постоянно. К основным относятся те, что повторяют функциональность классовых компонентов, как-то: работа с состоянием, побочными эффектами (жизненный цикл), контекстом и прямым доступом к Dom. Их мы рассмотрим в курсе. Информацию по остальным хукам можно будет найти в официальной документации.

Помимо встроенных, в сети можно найти сотни, если уже не тысячи готовых хуков на все случаи жизни. Например популярная библиотека react-use насчитывает больше 115 хуков. Сейчас разработка на React во многом превратилась в поиск и использование подходящих хуков, что хорошо, можно сосредоточиться на действительно бизнес-задачах и не заниматься изобретением велосипедов.

Дополнительные материалы

1. Плагин eslint-plugin-react-hooks

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.