Представление хуков

Хуки — это новое дополнение в React 16.8. Они позволяют использовать состояние и другие возможности React без написания класса.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Эта новая функция useState — первый «хук», который мы изучим, но этот пример — всего лишь затравка. Не волнуйтесь, если пока всё непонятно!

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

Примечание

React 16.8.0 — первая версия, поддерживающая хуки. При обновлении не забудьте обновить все пакеты, включая React DOM. React Native поддерживает хуки с момента релиза React Native 0.59.

Видео-введение

На React Conf 2018 Софи Альперт и Дан Абрамов представили хуки, а затем Райан Флоренс продемонстрировал, как перестроить приложение для их использования. Посмотрите видео здесь:

Без внесения критических изменений

Прежде чем продолжить, обратите внимание, что хуки:

• Полностью опциональны. Вы можете опробовать хуки в нескольких компонентах, не переписывая существующий код. Но вам не обязательно изучать или использовать хуки прямо сейчас, если этого не хотите.
• На 100% совместимы с предыдущими версиями. Хуки не содержат критических изменений.
• Доступны сейчас. Хуки доступны с выходом v16.8.0.

Нет планов по удалению классов из React. Подробнее о стратегии постепенного внедрения хуков читайте в нижней части этой страницы.

Хуки не заменяют ваши знания концепций React. Вместо этого хуки предоставляют более прямой API к концепциям React, которые вы уже знаете: props, состояние, контекст, ссылки и жизненный цикл. Как мы покажем позже, хуки также предлагают новый мощный способ их объединения.

Если вы просто хотите начать изучать хуки, можете немедленно перейти к следующей странице! Вы также можете продолжить чтение этой страницы, чтобы узнать больше о том, почему мы добавляем хуки и как будем использовать их, не переписывая приложения.

Мотивация

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

Сложно повторно использовать состояние логику между компонентами

React не предлагает способ «прикрепить» повторно используемое поведение к компоненту (например, подключить его к хранилищу). Если вы работали с React некоторое время, вы можете быть знакомы с такими паттернами, как render props и higher-order components, которые пытаются решить эту проблему. Но эти паттерны требуют перестройки ваших компонентов при их использовании, что может быть громоздким и затруднять отслеживание кода. Если вы посмотрите на типичное приложение React в React DevTools, вы, вероятно, найдете «ад компонента-обёртки» из компонентов, окружённых слоями поставщиков, потребителей, higher-order компонентов, render props и других абстракций. Хотя мы могли бы отфильтровать их в DevTools, это указывает на более глубокую лежащую проблему: React нужен лучший примитив для совместного использования состояния.

С помощью хуков вы можете извлечь состояние логики из компонента, чтобы его можно было тестировать независимо и повторно использовать. Хуки позволяют повторно использовать состояние логики без изменения иерархии вашего компонента. Это упрощает совместное использование хуков между многими компонентами или с сообществом.

Мы обсудим это подробнее в создании собственных хуков.

Сложные компоненты становятся труднопонятными

Мы часто должны были поддерживать компоненты, которые начинались как простые, но со временем превращались в неподдающийся управлению клубок состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь не связанной логики. Например, компоненты могут выполнять некоторую загрузку данных в componentDidMount и componentDidUpdate. Однако тот же метод componentDidMount может также содержать некоторую не связанную логику, которая устанавливает обработчики событий, с очисткой, выполняемой в componentWillUnmount. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно не связанный код оказывается объединённым в одном методе. Это слишком легко приводит к появлению ошибок и несоответствий.

Во многих случаях невозможно разбить эти компоненты на более мелкие, потому что состояние логики находится повсюду. Также их трудно тестировать. Это одна из причин, по которой многие предпочитают комбинировать React с отдельной библиотекой управления состоянием. Однако это часто приводит к излишней абстракции, требует переключения между различными файлами и затрудняет повторное использование компонентов.

Для решения этой проблемы хуки позволяют разделить один компонент на более мелкие функции, основываясь на том, какие части связаны (например, настройка подписки или получение данных), а не на принудительном разделении на основе методов жизненного цикла. Вы также можете выбрать управление локальным состоянием компонента с помощью редьюсера, чтобы сделать его более предсказуемым.

Мы обсудим это подробнее в использовании хука Effect.

Классы сбивают с толку и людей, и машины

Помимо усложнения повторного использования кода и организации, мы обнаружили, что классы могут быть значительным препятствием для изучения React. Вам необходимо понять, как this работает в JavaScript, что сильно отличается от того, как это работает в большинстве языков. Вам нужно помнить, как привязывать обработчики событий. Без нестабильных предложений синтаксиса код очень громоздкий. Люди прекрасно понимают props, состояние и передачу данных сверху вниз, но по-прежнему испытывают трудности с классами. Различие между функциями и компонентами класса в React и то, когда использовать каждый из них, приводит к разногласиям даже между опытными разработчиками React.

Кроме того, React существует уже около пяти лет, и мы хотим, чтобы он оставался актуальным в ближайшие пять лет. Как показывают Svelte, Angular, Glimmer и другие, компиляция компонентов в момент времени имеет большой потенциал будущего. Особенно если она не ограничена шаблонами. Недавно мы экспериментировали с свёртыванием компонентов с использованием Prepack, и мы получили многообещающие предварительные результаты. Однако мы обнаружили, что компоненты класса могут способствовать нежелательным шаблонам, которые приводят к тому, что эти оптимизации возвращаются к более медленному пути. Классы представляют проблемы и для современных инструментов. Например, классы плохо сжимаются, и они делают горячую перезагрузку нестабильной и ненадежной. Мы хотим представить API, который делает более вероятным, что код останется на оптимизируемом пути.

Для решения этих проблем хуки позволяют использовать больше функций React без классов. По своей концепции компоненты React всегда были ближе к функциям. Хуки охватывают функции, но без ущерба для практической сути React. Хуки предоставляют доступ к императивным обходным путям и не требуют изучения сложных функциональных или реактивных техник программирования.

Примеры

Обзор хуков — хорошее место для начала изучения хуков.

Стратегия постепенного внедрения

Краткое изложение: нет планов по удалению классов из React.

Мы знаем, что разработчики React сосредоточены на выпуске продуктов и у них нет времени изучить каждый новый API, который выходит. Хуки очень новые, и возможно, лучше подождать больше примеров и учебных пособий, прежде чем начинать изучать или внедрять их.

Мы также понимаем, что требования к добавлению нового примитива в React очень высоки. Для любопытных читателей мы подготовили подробный RFC, который углубляется в мотивацию с более подробными сведениями и предоставляет дополнительную информацию о конкретных решениях по дизайну и связанных с ними предыдущих работах.

Важный момент: хуки работают бок о бок с существующим кодом, поэтому вы можете внедрять их постепенно. Нет спешки в миграции на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих сложных компонентов класса. Необходимо немного изменить мышление, чтобы начать «думать о хуках». По нашему опыту, лучше всего сначала практиковаться в использовании хуков в новых и некритичных компонентах и убедиться, что все члены вашей команды чувствуют себя комфортно с ними. После того, как вы попробуете хуки, не стесняйтесь отправить нам отзывы, положительные или отрицательные.

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

Часто задаваемые вопросы

Мы подготовили страницу часто задаваемых вопросов о хуках, которая отвечает на самые распространённые вопросы о хуках.

Следующие шаги

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