Хуки вводятся из react 16.8.0. Проще говоря, он позволяет использовать методы состояния и жизненного цикла без написания класса. Перед тем, как начать, желательно и рекомендуется посмотреть следующее видео.

Итак, давайте сначала обсудим необходимость крючков и практические проблемы, которые они намеревались решить.

Проблемы

  1. Иногда мы слышим, как люди говорят о том, что реакция не позволяет разделить проблемы. Обычно у нас есть выборка данных, проверка форм, анимация и т. Д. И если вы попробуете это только с компонентами, то в итоге вы получите не что иное, как огромные компоненты, дублирующую логику. Например, вам нужно написать код, который извлекает или отправляет данные в вашу службу API на каждой отдельной странице. Крючки позволяют убрать эти накладные расходы.
  2. Раньше вам нужно было разделить логику вашего сайта на основе метода жизненного цикла. Например, вы можете подписаться на некоторую конечную точку в методе componentDidMount, а затем вам обязательно нужно отказаться от подписки в componentWIllUnmount. Точно так же вам, возможно, придется обновить то же самое в другом методе жизненного цикла. Но проницательные читатели легко заметили, что мы, по сути, выполняем действия с одним и тем же объектом, тогда зачем нам нужен отдельный метод для каждого из них. Это тот момент, когда крючки выскакивают и спасают вас. Хуки позволяют разделять код на основе выполняемого действия, а не жизненного цикла. Следуя приведенному выше примеру, теперь вы можете подписаться, отказаться от подписки и обновить один и тот же объект в форме single useEffect hook. В последней части я приведу пример.
  3. Это не совсем новая концепция. Раньше нам приходилось использовать компонент более высокого порядка (HOC) или миксины для достижения тех же функций, что и хуки. Но для этого требуется гораздо больше кода, и мы все равно не можем делиться кодом до уровня хуков. Это также делает ваш код нечитаемым и все труднее и труднее отлаживать.
  4. Многих людей "this" ключевое слово действительно раздражает, нам нужно связать каждый вызов функции с "this", добавить "this." Перед использованием какой-либо переменной состояния / реквизита. Но с хуками эта проблема решается, поскольку мы обсудим дальше на простых примерах.

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

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

useState - Этот хук, как следует из названия, используется для инициализации состояния, а затем для установки состояния. Его использование показано на рисунке.

[loggedin, setloggedin]=useState(false);

Этот хук вернет два элемента массива. Во-первых, это простая переменная состояния, а во-вторых, функция, и теперь мы можем использовать эту функцию для изменения состояния переменной loggedin. В нашем примере

setloggedin(true);

Эта строка эквивалентна this.setState ({}), с которым мы все знакомы. Вы можете в любом месте этой функции напрямую использовать переменную состояния loggedin.

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

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

useEffect(() => {
  console.log("useEffect hook called");
  document.title = 'Learn hooks';
}, []);

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

useEffect as componentDidUpdate - этот метод вызывается сразу после обновления и не вызывается для первоначального рендеринга. Итак, если у вас есть приложение, в котором вам нужно получать данные из API всякий раз, когда пользователь изменяет поисковый тег или строку, то вот выход, используя useEffect как componentDidUpdate.

useEffect(() => {
  console.log("component updated");
  fetchData(props.searchTags)
}, [props.searchTags]);

Мы передаем массив с props.searchTags вместо просто пустого массива, как раньше. Теперь код внутри функции, которую мы передали в качестве первого аргумента, будет запускаться всякий раз, когда реквизиты searchTags изменятся, и, таким образом, мы успешно выполнили метод componentDidUpdate с useEffect, который тоже без каких-либо накладных расходов на запись условия if else для проверки, были ли эти реквизиты изменены или нет.

useEffect as componentWillUnmount - этот метод вызывается непосредственно перед размонтированием и уничтожением компонента из DoM. Чтобы реализовать этот метод с заданным хуком, мне нужно раскрыть еще одну особенность этого хука, что функция, которую мы передаем в качестве первого аргумента, также может возвращать функцию, которая будет запущена прямо перед запуском useEffect в следующий раз. и также будет работать в последний раз. Итак, зная эту удивительную вещь, можно легко догадаться, что мы вполне можем реализовать размонтирование, просто вернув функцию из реализации componentDidMount.

useEffect(() => {
  console.log("useEffect hook called");
  return()=>{
        console.log('component destroyed')
  }
}, [])

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

Пользовательские хуки

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

const [isLoading, data]=useApi('/allUser', []);

isLoading и data - это переменные, которые использует ловушка useApi, мы передаем URL-адрес и список зависимостей в качестве аргумента ловушке. Теперь вы можете использовать этот хук на любой странице и в любом приложении, в котором вам нужно получить данные из API. Вот как хуки позволяют вам поделиться логикой.

Подведение итогов

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

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

Если вы хотите получать уведомления о моих статьях и обновлениях, подписывайтесь на меня в Twitter и Medium.