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

Хук — это специальная функция, которая позволяет вам «подключаться» к функциям React.

Представленные на React Conf 2018 и впервые выпущенные в React 16.8.0, хуки на 100 % совместимы с предыдущими версиями и могут использоваться во всех приложениях или только в определенных компонентах.

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

React предоставляет нам несколько хуков (useState, useEffect, useContext…), мы можем использовать все, что нам нужно, и столько раз, сколько нам нужно. Даже если вы обнаружите, что нет хука, который поможет вам решить вашу проблему, вы можете создать свой собственный хук.

Правила хуков

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

С компонентами класса мы не беспокоимся о порядке определенных функций, собственный жизненный цикл определяет, какая функция (ComponentDidMount, ComponentWillUpdate, ComponentDidUpdate…) будет выполняться и в какой позиции.

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

Подумайте об этом компоненте:

Вот как работает наш код:

React использует порядок объявленных хуков, чтобы связать некоторое локальное состояние, поэтому он знает, объявлена ​​ли уже переменная.

Когда наше приложение работает, при первом отображении функции состояния инициализируются значением, полученным как аргумент, как мы видим в последнем правиле, но если мы поместим хук внутри условия:

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

Не вызывайте хуки из обычных функций JavaScript. Вместо этого вы можете:

  • Вызывать хуки из функциональных компонентов React.
  • Вызов хуков из пользовательских хуков.

Следуя этому правилу, вы гарантируете, что вся логика с отслеживанием состояния в компоненте четко видна из его исходного кода.

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

Плагин ESLint

Также люди из React выпустили очень полезный плагин. Это поможет нам соблюдать предыдущие правила. Установите его и проверьте конфигурацию плагина.

npm install eslint-plugin-react-hooks -save-dev

Если вы хотите больше узнать о хуках, вот Официальная документация по хукам React.