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

Когда был запущен React 16.8, хуки были добавлены как новое дополнение к нему. Это была стабильная версия, включенная в React 16.8, и она была запущена на конференции React 2018 Софи Альперт и Дэном Абрамовым.

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

Давайте теперь углубимся в хуки и то, как они используются.

Почему слово «крюк»?

Хуки позволяют вам подключаться к состояниям и функциям React без написания для него какого-либо класса.

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

Было еще много проблем, которые создавали классы. Чтобы классы не повлияли на популярность React, были введены хуки.

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

Встроенные крючки

В настоящее время React использует некоторые встроенные хуки, такие как useState и useEffect. Давайте рассмотрим оба на примерах.

Пример состояния использования

useState используется для обновления состояния и сохранения значений состояния после обновления/повторного рендеринга.

Давайте посмотрим на пример, представленный в официальной документации 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 в компоненты функций».

То, что мы делаем здесь, в основном использует count в качестве переменной состояния и обновляет ее значение каждый раз, когда мы нажимаем кнопку «Click me».

Давайте разберем следующее утверждение, чтобы понять, как работает синтаксис.

const [count, setCount] = useState(0);

Здесь мы объявили «переменную состояния» — в данном случае count. Его не нужно так называть — его можно назвать как угодно. Кроме того, в отличие от компонентов класса, состояние не обязательно должно быть объектом; например, count здесь число, но мы могли бы также использовать строку, если бы нам было нужно. В данном конкретном случае мы пытаемся обновить переменную count каждый раз, когда пользователь нажимает кнопку «Click me».

useState(0) указывает, что начальное значение count равно 0. Аргумент, передаваемый хуку useState, всегда является начальным состоянием переменной состояния. В этом случае это будет означать, что первый щелчок по кнопке «Click me» установит значение count равным 1, которое будет сохранено React после повторного рендеринга, а второй раз, когда мы нажмем на него, он будет установлен на 2 и так далее. Это связано с тем, что, в отличие от обычных переменных, переменные состояния сохраняются React.

Теперь давайте перейдем к setCount. Опять же, согласно документации, «хук useState всегда возвращает пару значений: текущее состояние и функцию, которая его обновляет». Когда мы нажимаем кнопку «Нажми меня», функция setCount вызывается, и в этом случае мы передаем аргумент count + 1, что приводит к увеличению переменной состояния count на 1, значение, которое будет сохранено после повторного рендеринга, вызванного обновлением состояния, когда мы нажмем кнопку.

Вот как мы обновляем состояние с помощью хука useState.

Пример использованияЭффект

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

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

Опять же, для простоты, давайте возьмем пример из документации React, он использует тот же контрпример, который мы видели для useState выше.

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:  useEffect(() => {    // Update the document title using the browser API    
document.title = `You clicked ${count} times`;  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Давайте разберемся, что здесь происходит.

Примечание. Если вы знакомы с компонентами класса, вы можете думать о хуке useEffect как о componentDidMount, componentDidUpdate и componentWillUnmount вместе взятых.

Хук useEffect по умолчанию запускается после каждого рендера, включая первый первоначальный рендер и после каждого обновления. После того, как React обновляет DOM, иногда нужно запустить дополнительный код. Например, выполнение сетевого запроса (извлечение данных из API) или ведение журнала.

На самом базовом уровне хук useEffect сообщает React, что ваш компонент должен что-то сделать после рендеринга. Обычно мы передаем функцию в качестве аргумента useEffect. Эта функция запоминается React, и после того, как обновление DOM будет выполнено, React вызовет ее.

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

Я сделал все просто, так как это вводная статья, но вы можете поиграть с ней и освоиться.

Правила использования крючков

Согласно официальной документации Hooks, необходимо соблюдать два основных правила.

Первое правило гласит, что нельзя вызывать хуки внутри каких-либо функций и циклов, поэтому хуки можно вызывать только на верхнем уровне.

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

Это два простых правила, которые вы должны помнить при использовании хуков в React.

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

Купите себе среднее членство за 5 долларов по моей реферальной ссылке, нажмите здесь (я получаю небольшую комиссию, и она поддерживает меня напрямую без дополнительных затрат для вас)



Присоединяйтесь к Medium по моей реферальной ссылке — Aniket
Прочитайте все истории от Aniket (и тысяч других авторов на Medium). Ваш членский взнос напрямую поддерживает Aniket…aniketz.medium.com



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

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.