react что такое hook
React Hooks: что это такое и какие проблемы они решают?
Работая с React, и до выхода Hooks в версии 16.8, у вас всегда была возможность создавать компоненты тремя разными способами:
Элементарные компоненты.
Эти компоненты являются самыми простыми, они характеризуются тем, что являются просто переменными, хранящими определенное выражение JSX. Поэтому они не принимают свойств и не имеют состояния, хотя они все еще могут использовать любой оператор, как обычно, например:
Данный массив, вставленный в тег JSX, выведет список в DOM.
Функциональные компоненты. До появления хуков эти компоненты использовались в основном для изоляции повторно используемых функций, но с дополнительной логикой, не зависящей от их состояния, поскольку функциональные компоненты принимали свойства, но не обладали состоянием. Примером функционального компонента может быть:
Компоненты классов. Они всегда были самыми распространенными компонентами в разработке на React, по той простой причине, что только они имели свойства, состояние и жизненный цикл,. Это делало их важными для управления основной логикой и циклом приложения. Простейшим примером компонента класса с состоянием и некоторым жизненным циклом может быть:
Но в 2018 году эти предположения устарели, когда React представил хуки, предложив новый способ работы, основанный на функциональных компонентах с доступом к состоянию и жизненному циклу.
Что такое хук?
Хук – это функция javascript, которая позволяет создавать/ получать доступ к состоянию и жизненным циклам React.
Для обеспечения стабильности работы приложения хук должен использоваться в соответствии с двумя основными правилами:
Как мы видели в предыдущем разделе, функциональный компонент до версии React 16.8 не мог иметь состояния или жизненного цикла, поэтому единственным способом создания, например, простого аккумулятора было:
Благодаря хукам мы можем использовать этот компонент, добавив состояние с помощью useState, поэтому предыдущий аккумулятор в функциональном виде будет выглядеть так:
Хуки в React
Поскольку конечной целью хуков является упрощение текущей логики, React предоставляет лишь сокращенный их набор, при этом гибко реагируя на различные ситуации в жизненном цикле приложения и давая возможность создавать и свои собственные.
Базовые хуки
React предоставляет три основных хука, которые позволяют решить основные задачи по реализации жизненного цикла в компоненте класса:
Хук состояния useState
Этот хук возвращает значение с сохраненным состоянием и функцию, необходимую для его обновления:
Начальное состояние – это параметр, переданный в useState, в данном случае 0, и это будет состояние, доступное во время начального рендеринга и до вызова функции setCount с новым значением. В данном случае, например, setCount(count + 1) увеличит значение count на единицу, которая станет 1 при следующем рендеринге. Также можно использовать значение предыдущего состояния в самой функции установки состояния, поэтому вышеописанное также можно записать как setCount(count => count + 1).
Хук эффекта useEffect
Этот хук позволяет нам добавлять дополнительные эффекты к заданному функциональному компоненту, то есть позволяет вносить изменения в нашу логику после выполнения рендеринга, аналогично методам жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount в компонентах класса.
Одним из больших преимуществ этого хука является то, что он упрощает жизненный цикл, так что три доступных метода класса могут быть выражены с помощью только этого хука. Например, компонента класса, который загружает данные из cookie при подключении и записывает их при отключении, мы могли бы написать следующим образом:
Это может быть сделано с помощью одного функционального компонента:
В этом случае, используя пустой массив зависимостей, мы говорим процессу запускаться только при подключении (например, componentDidMount). А возвратом функции является новая функция, которая вызывается только при отключении (например, componentWillUnmount).
Хук контекста useContext
Если вы уже использовали контекст React, это хук для вас. Контекст в React – это способ передачи данных между различными компонентами без необходимости ручного каскадирования props. Это полезно, например, когда мы хотим создать темы или локализации, которые должны быть глобальными для всего дерева компонентов.
В случае компонентов класса контекст передается через provider, который охватывает дерево компонентов. Эти компоненты должны содержать соответствующий контекст, так что компонент, имеющий локализацию и использующий контекст LocalContext, может быть написан следующим образом:
В случае функционального компонента и с использованием хуков, мы можем использовать useContext, который позволяет нам получить доступ к созданному контексту. Например, для небольшого приложения, которое передает местоположение компоненту, подобному предыдущему, но в функциональном виде:
Зачем использовать хуки?
Использование хуков в функциональных компонентах кажется простым дополнением, которое, по сути, не заменяет текущих компонентов класса, поэтому мы можем задать себе вопрос: в чем смысл использования хуков и изменения способа разработки с React?
Во-первых, использование хуков уменьшает количество сущностей, необходимых при разработке приложений React. Поэтому нам не нужно постоянно переключаться между функциями, классами, HOC или элементами для выполнения аналогичных задач; хуки предоставляют нам однородность экосистемы.
Во-вторых, жизненный цикл React был значительно упрощен с помощью хуков. Так что, как мы видели ранее, методы жизненного цикла классов componentDidMount, componentDidUpdate и componentWillUnmount обобщены в одном хуке useEffect, который действует как все три.
Так, таймер, который добавляет определенное количество в секунду, сначала использует класс компонента:
Он может быть сделан как функциональный компонент с использованием хуков:
Что, безусловно, намного компактнее, как по качеству кода, так и по использованию функций, а работает аналогично.
В-третьих, использование функциональных компонентов усиливает основной принцип React – избегать мутаций. Поскольку изменение состояния компонента класса – это то же самое, что мутировать его свойство state. Так же как и необходимость выполнять привязку для функций, управляющих событиями, подходы, которые значительно увеличивают сложность и снижают предсказуемость компонента.
И наконец, мы видим, что введение хука useReducer вводит в ядро React возможность работы с паттерном Redux без необходимости использования дополнительных зависимостей. Этот хук рекомендуется, когда приложение слишком сложное и с большим количеством вложенности. Так как reducer принимает функцию типа (state, action) => newState, возвращающую текущее состояние, и функцию “dispatch”, которая позволяет нам эмулировать функциональность, доступную в настоящее время в библиотеках redux и react-redux, используемых для решения проблемы управления состоянием или каскадирования свойств.
Заключение.
React Hooks предлагает нам новую парадигму и новый образ мышления, тесно связанный с функциональным программированием. Где функциональные элементы являются предсказуемыми блоками ввода-вывода, а побочные эффекты изолируются управляемым способом.
Похожие записи
Для акций или отдельных дать периодически может возникать необходимость реализовать обратный отсчет. Как это сделать…
Продвинутые React Hooks: подробный разбор useEffect
Feb 22 · 7 min read
С выходом React 16.8 в 2019 году React Hooks наконец-то стали доступны для использования в пригодных для эксплуатации приложениях. Хуки позволяют React-разработчикам делать функциональные компоненты с отслеживанием состояния и не использовать классовые компоненты.
UseEffect — один из трёх больших встроенных React Hooks и один из самых популярных хуков. Он даёт возможность создавать условные изменения, ссылающиеся на состояние программы внутри функционального компонента.
Ближе к концу статьи вы узнаете, как и когда реализовывать этот хук для создания реактивных программ, и поймёте, почему он так часто используется React-разработчиками.
В статье мы рассмотрим следующие вопросы и темы:
Что такое React Hooks?
В React есть фу н кциональные компоненты, которые не содержат внутреннего состояния. А ещё есть классовые компоненты, добавляющие в программу логику с отслеживанием состояния и позволяющие использовать методы жизненного цикла.
Многие разработчики были против такого подхода, так как классовым компонентам для поддержки внутренних состояний требуются классы ES6.
И вот была предложена альтернатива в виде React Hooks.
React Hooks — это функции, которые позволяют подцепиться к состоянию и жизненному циклу React из функциональных компонентов. Это даёт возможность использовать React без классов, которые многим не нравятся из-за их зависимости от вызовов this JavaScript. А главное — хуки включаются по желанию и работают с имеющимся кодом.
Существует несколько встроенных хуков (таких как useEffect или useState ), которые ссылаются на стандартные внутренние состояния. Есть также возможность создавать пользовательские хуки, ссылающиеся на выбранные состояния.
Вот самые популярные встроенные хуки:
Преимущества React Hooks:
Сравнение реализации компонентов с классами и хуками
Хуки предназначены для всего того, на что способны классы, и могут даже больше. Посмотрим, как преобразится старый код на React с использованием хуков вместо классов.
Вот старый код на React без хуков:
Для этого внесём в код следующие изменения:
Вот как теперь выглядит то же самое приложение на React с хуками:
Хуки легко задействовать в приложении, и код при этом становится более удобным для восприятия!
Что представляет собой хук useEffect?
useEffect — один из самых популярных хуков, ведь он выполняет побочные эффекты в функциональных компонентах. Присмотримся к нему повнимательнее, чтобы понять, как это происходит.
Хук useEffect позволяет запускать дополнительный код после того, как React обновит DOM.
Синтаксис
Хук useEffect принимает два аргумента:
Первый аргумент — это функция обратного вызова, которая по умолчанию запускается после каждого отображения.
Второй аргумент — это опциональный массив зависимостей, который указывает хуку на выполнение обратного вызова только при наличии изменения в целевом состоянии. Хук сравнивает значение предыдущего и текущего состояния каждой зависимости. Если эти два значения не совпадают, хук использует обратный вызов первого аргумента.
Массивы зависимостей переопределяют поведение обратного вызова по умолчанию и обеспечивают, что хук проигнорирует всё остальное в области компонента.
Примеры использования
Вот типичные сценарии применения useEffect :
В каждом из этих случаев useEffect используется вместо метода жизненного цикла.
Использование массива зависимостей с хуком useEffect Hook
Для оптимизации хука useEffect необходимо правильно задействовать массивы зависимостей. Важно использовать эти хуки для предотвращения ненужных повторных отображений, даже когда ничего не меняется.
Приведённый ниже код выводит на страницу полученное сообщение, но не использует массив зависимостей.
Всё вроде хорошо, но при открытии консоли браузера обнаруживается, что сообщение >> Loading Message несколько раз перезапускалось.
Сообщение не изменилось, поэтому оптимизируем всё это: сообщения будут загружаться и получаться только раз.
Секрет в добавлении пустого массива зависимостей. Строки 8–10 просто заменяются на:
По умолчанию хук useEffect запускается после каждого повторного отображения. А с массивом зависимостей он запускается один раз и затем запускается снова при каждом изменении передаваемой зависимости. Пустой массив не оставляет условий для повторного запуска хука, обеспечивая получение сообщения только при первом отображении.
Запуск функции useEffect с изменением состояния или пропсов
Массивы зависимостей также полезны при создании адаптивных приложений. Но это должны быть заполненные массивы.
Возьмём приложение на React, позволяющее пользователям устанавливать псевдоним, вводя его в поле ввода. После установки псевдонима приложение получает персонализированное приветственное сообщение из внешнего API.
Создание пользовательских хуков
Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.
Создание пользовательских хуков позволяет вам перенести логику компонентов в функции, которые можно повторно использовать.
В разделе использование хука эффекта мы увидели компонент из приложения чата, в котором отображается сообщение о том, находится ли наш друг в сети:
Вместо этого, мы бы хотели, чтобы FriendStatus и FriendListItem разделяли эту логику.
Когда одинаковую логику состояния нужно повторно использовать в нескольких компонентах, в React традиционно применялись рендер-пропсы и компоненты высшего порядка. Рассмотрим, как хуки решают многие из тех же задач, не добавляя лишних компонентов в ваше дерево.
Извлечение логики в пользовательский хук
Когда мы хотим, чтобы две JavaScript-функции разделяли какую-то логику, мы извлекаем её в третью функцию. И компоненты и хуки являются функциями, поэтому с ними это тоже работает!
Пользовательский хук — это JavaScript-функция, имя которой начинается с «use», и которая может вызывать другие хуки. Например, функция useFriendStatus ниже — это наш первый пользовательский хук:
Здесь нет ничего нового, логика просто скопирована из компонентов выше. Так же как и в компонентах, убедитесь, что вы не используете другие хуки внутри условных операторов и вызываете их на верхнем уровне вашего хука.
Цель нашего хука useFriendStatus — подписать нас на статус друга. Поэтому он принимает в качестве аргумента friendID и возвращает статус друга в сети:
Теперь давайте посмотрим, как мы можем использовать наш пользовательский хук.
Использование пользовательского хука
Код будет работать как раньше? Да, он работает точно так же. Если вы посмотрите внимательно, вы заметите, что мы не вносили никаких изменений в логику. Всё, что мы сделали, это извлекли общий код в отдельную функцию. Пользовательские хуки — это скорее соглашение, соответствующее дизайну хуков, нежели чем возможность самого React.
Должен ли я писать «use» в начале названия хука? Очень желательно. Это важное условие, без которого мы не сможем автоматически проверять нарушения правил хуков, потому что не определим, содержит ли определённая функция вызовы хуков внутри.
У хука, используемого в двух компонентах, одинаковое состояние? Нет. Пользовательские хуки — это механизм повторного использования логики с состоянием (например, установка подписки и сохранение текущего значения), но каждый раз, когда вы используете пользовательский хук, всё состояние и эффекты внутри него полностью изолированы.
Совет: Передача информации между хуками
Поскольку хуки являются функциями, мы можем передавать информацию между ними.
Продемонстрируем это, используя другой компонент из нашего гипотетического примера чата. Это средство выбора получателей сообщений чата, которое показывает, находится ли выбранный в данный момент друг в сети:
Пользовательские хуки предлагают гибкую логику совместного использования, которая раньше была невозможна в React-компонентах. Вы можете написать собственные хуки, которые охватывают широкий спектр вариантов использования, таких как обработка форм, анимация, декларативные подписки, таймеры и, возможно, многих других, которые мы не рассматривали. Более того, вы можете создавать хуки, которые также просты в использовании, как и встроенные функции React.
Попробуйте не добавлять абстракцию слишком рано. Теперь, когда функциональные компоненты обладают большими возможностями, вполне вероятно, средний функциональный компонент станет длиннее в вашей кодовой базе. Это нормально, не думайте, что вы должны немедленно разделить его на хуки. Но мы также рекомендуем вам находить ситуации, когда пользовательский хук поможет скрыть сложную логику за простым интерфейсом или распутать большой компонент.
Например, у вас есть сложный компонент, содержащий множество внутренних состояний, каждое из которых управляется особым образом. useState не упрощает централизацию логики обновления, поэтому её можно попробовать переписать как Redux-редюсер:
Редюсеры очень удобно тестировать изолированно и масштабировать для реализации сложной логики обновления. При необходимости вы можете разбить их на более мелкие редюсеры. Однако вам может нравиться пользоваться преимуществами внутреннего состояния React, или вы не хотите устанавливать ещё одну стороннюю библиотеку.
Теперь мы можем использовать его в нашем компоненте и с помощью редюсера управлять его состоянием:
Так как необходимость управления внутренним состоянием с помощью редюсера в сложном компоненте достаточно распространена, мы встроили хук useReducer прямо в React. Вы найдёте его вместе с другими встроенными хуками в API-справочнике хуков.
Изучите основ React Hooks(Крючки) за
В начале этого года команда React выпустила новое дополнение — хуки для React в версии 16.8.0.
Если бы React была большой миской конфет, то крючки — это последнее дополнение, очень жевательные конфеты с отличным вкусом!
Итак, что именно означают крючки? И почему они стоят вашего времени?
Вступление
Одна из основных причин, по которой крючки были добавлены в React, заключается в том, чтобы предложить более мощный и выразительный способ записи (и обмена) функциональности между компонентами.
В более долгосрочной перспективе мы ожидаем, что хуки будут основным способом написания компонентов React — React Team
Если крючки так важны, почему бы не узнать о них в увлекательной игровой форме!
Конфетница
Считайте React красивой миской конфет.
Миска конфет была невероятно полезна людям во всем мире.
Люди, которые сделали эту миску конфет, поняли, что некоторые конфеты в миске не приносили людям много пользы.
Да, пара конфет была очень вкусной! Но они привели к некоторой сложности, когда люди ели их — подумайте, реквизит рендера и компоненты более высокого порядка(render props and higher order components)?
Они сделали правильную вещь — не выбрасывая все предыдущие конфеты, но делая новые наборы конфет.
Эти конфеты назывались Крючками(Hooks).
Эти конфеты существуют для одной цели: чтобы вам было легче делать то, что вы уже делали.
Эти конфеты не супер особенные. На самом деле, когда вы начнете есть их, вы поймете, что они на вкус знакомы — это всего лишь функции Javascript!
Как и у всех хороших конфет, у этих 10 новых конфет есть свои уникальные названия. Хотя они все вместе называются крючками.
Эти 10 конфет, как и шоколад, содержат одни и те же ингредиенты. Знание того, как один вкус, помогает вам относиться к другому.
Звучит смешно? Теперь давайте возьмем эти конфеты.
Состояние крючков(The State Hook)
Как было сказано ранее, хуки — это функции. Официально их 10. 10 новых функций, которые делают функции записи и обмена в ваших компонентах намного более выразительными.
В течение долгого времени вы не могли использовать локальное состояние в функциональном компоненте. Ну не до крючков.
Рассмотрим следующее встречное приложение:
С компонентом Counter, показанным ниже:
Позвольте мне задать вам один простой вопрос. Почему именно у нас есть этот компонент как компонент класса?
Ответ прост, потому что нам нужно отслеживать некоторые локальные состояния внутри компонента.
Я проведу вас через это шаг за шагом.
Функциональный компонент не имеет всего синтаксиса Расширения класса …
Также не требуется метод рендеринга.
Есть две проблемы с кодом выше.
Извлечь handleClick Нажмите на отдельную функцию внутри функционального компонента:
До рефакторинга переменная count была получена из объекта состояния компонента класса.
В функциональных компонентах и с хуками это происходит из-за вызова функции useState или хука.
useState вызывается с одним аргументом, значением начального состояния, например, useState (0) где 0 представляет начальное значение состояния, которое нужно отслеживать.
Вызов этой функции возвращает массив с двумя значениями.
Первое значение — это отслеживаемое значение текущего состояния, а второе — функция для обновления значения состояния.
Думайте об этом как о некотором state и реплике setState — однако они не совсем одинаковы.
С этим новым знанием, здесь используется useState в действий.
Здесь следует отметить несколько вещей, помимо очевидной простоты кода!
Во-первых, поскольку вызов useState возвращает массив значений, значения можно легко разбить на отдельные значения, как показано ниже:
Также обратите внимание, что функция handleClick в рефакторированном коде не нуждается в какой-либо ссылке на prevState или что-то подобное.
Он просто вызывает setCount с новым значением count + 1.
Это связано с тем, что правильное значение переменной состояния count всегда будет сохраняться при повторном рендеринге.
Итак, нужно обновить переменную состояния счета, просто вызовите setCount с новым значением, например setCount (count + 1)
Как бы просто это ни звучало, вы создали свой самый первый компонент с использованием хуков. Я знаю, что это надуманный пример, но это хорошее начало!
Несколько вызовов useState
С компонентами класса мы все привыкли устанавливать значения состояния в объекте, независимо от того, содержат они одно свойство или более.
С useState вы могли заметить небольшую разницу.
В приведенном выше примере мы только вызывали useState с фактическим начальным значением. Не объект для хранения значения.
Итак, что, если мы хотим получить другое значение состояния
Можно ли использовать несколько вызовов useState?
Рассмотрим компонент ниже. То же, что и раньше, но на этот раз он отслеживает время нажатия.
Функциональные компоненты с React Hooks. Чем они лучше?
Относительно недавно вышла версия React.js 16.8, с которой нам стали доступны хуки. Концепция хуков позволяет писать полноценные функциональные компоненты, используя все возможности React, и позволяет делать это во многом более удобно, чем мы это делали с помощью классов.
Многие восприняли появление хуков с критикой, и в этой статье я хотел бы рассказать о некоторых важных преимуществах, которые нам дают функциональные компоненты с хуками, и почему нам стоит перейти на них.
Я намеренно не буду углубляться в детали использования хуков. Это не очень важно для понимания примеров в этой статье, достаточно общего понимания работы React. Если вы хотите почитать именно на эту тему, информация о хуках есть в документации, и если эта тема будет интересна, я напишу статью подробнее о том когда, какие, и как правильно использовать хуки.
Хуки делают переиспользование кода удобнее
Давайте представим компонент, который рендерит простую форму. Что-то, что просто выведет несколько инпутов и позволит нам их редактировать.
Примерно так, если сильно упростить, этот компонент выглядел бы в виде класса:
Тот же пример, но с хуками:
Отличие, которое я хочу здесь показать (есть и другие, о них будет ниже): мы можем вынести этот код и использовать в другом месте:
Хуки позволяют писать более интуитивно-понятный код
Представьте компонент (пока в виде класса), который, например, выводит окно текущего чата, список возможных получателей и форму отправки сообщения. Что-то такое:
Пример очень условный, но для демонстрации вполне подойдет. Представьте такие действия пользователя:
Но ведь сообщение отправлялось в чат 1? Так произошло из-за того, что метод класса работал не с тем значением, которое было в момент отправки, а с тем, которое было уже на момент завершения запроса. Это не было бы проблемой в таком простом случае, но исправление такого поведения во-первых, потребует дополнительной внимательности и дополнительной обработки, и во-вторых, может быть источником багов.
В случае с функциональным компонентом поведение отличается:
Представьте те же действия пользователя:
Итак, что же поменялось? Поменялось то, что теперь для каждого рендера, для котрого отличается currentChat мы создаем новый метод. Это позволяет нам совсем не думать о том, поменяется ли что-то в будущем — мы работаем с тем, что имеем сейчас. Каждый рендер компонента замыкает в себе все, что к нему относится.
Хуки избавляют нас от жизненного цикла
Этот пункт сильно пересекается с предыдущим. React — библиотека для декларативного описания интерфейса. Декларативность сильно облегчает написание и поддержку компонентов, позволяет меньше думать о том, что было бы нужно сделать императивно, если бы мы не использовали React.
Несмотря на это, при использовании классов, мы сталкиваемся с жизненным циклом компонента. Если не углубляться, это выглядит так:
Это кажется удобным, но я убежден в том, что это удобно исключительно из-за привычности. Этот подход не похож на React.
Вместо этого, функциональные компоненты с хуками позволяют нам писать компоненты, думая не о жизненном цикле, а о синхронизации. Мы пишем функцию так, чтобы ее результат однозначно отражал состояние интерфейса в зависимости от внешних параметров и внутреннего состояния.
Вот хороший пример работы компонента со счетчиком кликов из большой статьи про useEffect:
Намного более декларативно, не правда ли?
Итоги
React Hooks позволяют нам избавиться от некоторых проблем и облегчить восприятие и написание кода компонентов. Нужно просто поменять ментальную модель, которую мы на них применяем. Функциональные компоненты по сути — функции интерфейса от параметров. Они описывают все так, как оно должно быть в любой момент времени, и помогают не думать о том, как реагировать на изменения.
Да, иногда нужно научиться их использовать правильно, но точно так же и компоненты в виде классов мы научились применять не сразу.