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

Итак, во второй части этой статьи вы узнаете о таких хуках, как — useImperativeHandle, useDeferredValue, useTransition, useId, useLayoutEffect, useDebugValue, useSyncExternalStore и useInsertionEffect.

Содержание —

  • Дополнительные хуки (Продолжение статьи Часть 1)
    - useImperativeHandle
    - useDeferredValue
    - useTransition
    - useId
    - useLayoutEffect
    - useDebugValue
  • Перехватчики библиотеки
    — useSyncExternalStore
    — useInsertionEffect
  • Заключение

Дополнительные крючки

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

useImperativeHandle — Посмотрите на приведенный ниже код.

Обычно, когда мы создаем useRef и присваиваем ссылку элементу HTML, мы используем нативные методы, например, focus(), чтобы сфокусировать внимание на конкретном элементе. Но если вы хотите создать свои собственные императивные методы, обратитесь к рисунку 1, подрис. 1, строка 20, мы вызываем наш собственный метод alertHi. Для этого мы используем хук useImperativeHandle. См. рис. 1, подрис. 2, строка 4, здесь мы передаем первый аргумент как ref, второй аргумент — это функция обратного вызова, которая возвращает объект, содержащий все определенные пользователем методы для дескриптора ref, третий аргумент — это массив зависимостей, если вы хотите его указать.

См. ниже gif вывод —

useDeferredValue — Взгляните на приведенный ниже код.

Иногда мы хотим иметь возможность выполнять какую-то задачу при изменении состояния, но предположим, что эта задача довольно тяжелая и может мешать работе пользователя. В таких случаях мы можем использовать хук useDeferredValue. На рис. 3, подрис. 1, мы определили простой компонент с входными данными, а также визуализируем компонент списка, который принимает входное значение в качестве реквизита. Теперь, на рис. 3, подрис. 2, я создал компонент списка, который создает список размером LIST_SIZE. Теперь эту задачу создания можно рассматривать как тяжелую задачу для этого примера. Итак, мы знаем, что когда мы вводим в поле ввода, компонент будет повторно отображаться, и при каждом повторном отображении будет запускаться создание списка. Это повлияет на пользовательский опыт, потому что между ними будут задержки. Итак, чтобы решить проблему, мы можем отложить ввод, как показано на рис. 3, подрис. 2, строка 29, а затем просто заменить входное значение отложенным значением. Это повысит функциональность за счет откладывания тяжелых вычислений до тех пор, пока пользователь не закончит вводить текст в поле ввода. Подробнее здесь.

См. ниже gif вывод —

useTransition — взгляните на приведенный ниже код.

Предположим, вы хотите выполнить какую-то задачу при некотором изменении состояния, и это изменение состояния отвечает за изменение другого состояния. Чтобы показать такое поведение, я придумал пример на рисунке 5. Здесь я пытаюсь установить список после того, как мое состояние ввода установлено функцией handleChange. Но из-за того, как работает реакция, оба заданных состояния произойдут одновременно, т. Е. Только когда создание списка будет выполнено после изменения ввода, оба заданных состояния, наконец, будут выполнены, но такое поведение вызовет задержки и, очевидно, испортит пользовательский опыт. Но с useTransition ваш пользовательский интерфейс остается отзывчивым в середине повторного рендеринга. С помощью этого хука мы можем заставить тяжелую задачу работать в фоновом режиме, назначив ей относительно более низкий приоритет, чем другие заданные состояния, и таким образом наше первое установленное состояние для ввода останется незатронутым и может произойти без каких-либо задержек и когда список будет готов. , может быть выполнено второе заданное состояние для списка, и для этого будет запущен другой рендеринг.

Позволяет понять код. На рис. 5, строка 5, хук useTransition возвращает массив с двумя вещами — логическое значение с именем pending, указывающее, что переход еще не завершен, и поэтому вы можете показать какой-нибудь загрузчик и т. д., и функцию с именем startTransition позволяет добавить обновление состояния в качестве перехода, как показано на рис. 5, строка 12.

См. приведенный ниже gif вывод —

useId — взгляните на приведенный ниже код.

С помощью этого хука мы можем создавать идентификаторы, которые можно передавать в атрибуты доступности в наших компонентах реагирования. Этот хук ничего не принимает в качестве аргумента и возвращает уникальный идентификатор строки. Многократный вызов этого хука создаст несколько уникальных строковых идентификаторов, но здесь, на рис. 7, я просто использовал его один раз и добавил суффикс, чтобы сделать каждый идентификатор уникальным. Вы можете сделать то же самое, если в компонентах есть несколько элементов, которым нужны идентификаторы. Идентификаторы, созданные этим хуком, не уничтожаются, даже если компонент перерисовывается или когда перезагружается все приложение. Пример того, как выглядит идентификатор: :r1:
 Как вы можете видеть, вокруг ключевого слова r1 стоят двоеточия, что является разумным способом избежать прямых манипуляций с DOM с помощью document.querySelector.

См. ниже gif, чтобы увидеть результат —

useLayoutEffect — взгляните на приведенный ниже код.

  • Этот хук следует использовать только тогда, когда вам нужно внести существенные изменения (видимые пользователям) в макет, прежде чем браузер перерисует экран.
  • Он похож на хук useEffect по своей структуре и определению, но между ними есть одно существенное различие — useEffect выполняется асинхронно, тогда как useLayoutEffect выполняется синхронно.
  • Это имеет свои последствия для производительности по сравнению с useEffect , поэтому последний предпочтительнее.
  • Объяснение кода. Как вы можете видеть на рис. 9, для пользовательского интерфейса я определил кнопку и элемент div, который переключает отображение вокруг кнопки в зависимости от состояния show. Я также определил две ссылки, одну для кнопки, а другую для элемента div, который мы будем использовать в качестве всплывающей подсказки и отображать в нем некоторый контент. Теперь, в блоке useLayoutEffect на рис. 9, между строками 10–22, я просто повторно вычисляю размеры кнопки и вычисляю новое положение элемента div всплывающей подсказки, используя эти размеры. Одна вещь, которую нужно протестировать и наблюдать за вами: просто измените useLayoutEffect на useEffect, и вы получите небольшую задержку для того же перехода, который происходит очень быстро при использовании useLayoutEffect. Это связано с тем, что div всплывающей подсказки изначально отображается с начальным значением top 60, затем React запускает useLayoutEffect, который вычисляет новую позицию для div всплывающей подсказки и снова отображает его с новыми значениями. Наконец, React обновляет DOM, и на экране браузера появляется div всплывающей подсказки.

См. ниже gif, чтобы увидеть результат —

useDebugValue — Взгляните на приведенный ниже код.

  • useDebugValue полезен для отладки, добавляя метку к пользовательскому хуку внутри инструментов разработки React.
  • В вашем дереве компонентов внутри инструментов разработки реакции вы можете увидеть значение, которое хотите отладить, просто добавив этот хук на верхний уровень вашего компонента, см. рис. 11, подрис. 2, строка номер 18.

См. ниже gif для вывода —

  • Как вы можете видеть в выводе, объект, который я передал внутри хука, виден внутри инструментов разработки реакции внутри раздела хуков.
  • Вы можете использовать этот хук для проверки важных меток при отладке, таких как состояние сети (в сети/офлайн), пользователь вошел в систему или нет и т. д.

Библиотечные крючки -

useSyncExternalStore — взгляните на приведенный ниже код.

Давайте разберемся с приведенным выше кодом. На рис. 13, подрис. 1, в строке 7 я назвал хук useSyncExternalStore. Его общая сигнатура такова —

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

Он принимает три параметра, и обычно третий параметр используется очень редко. Перехватчик useSyncExternalStore используется для подписки на внешнее хранилище. Для этого я создал хранилище для демонстрации (см. рис. 13, подрис. 2). На рис. 1 в строке 7 хук возвращает моментальный снимок данных, хранящихся в переменной todos. Теперь нам также нужно передать две функции в качестве аргументов хуку.

  • подписаться — функция, которая подписывается на сохранение и возвращает функцию для отмены подписки.
  • getSnapshot — функция для получения данных хранилища.

На рис. 13, подрис. 2, вы можете ясно увидеть, как я реализовал два вышеупомянутых метода и еще один метод для добавления новой задачи.

См. ниже gif, чтобы увидеть результат —

useInsertionEffect — Взгляните на приведенный ниже код.

  • На рисунке 15 я создал очень простой компонент, который отображает три параметра, и выбор любого из них добавляет к ним стиль.
  • Я определил блок useInsertionEffect, который, по сути, создает стиль для «выбранного параметра» и добавляет его в элемент заголовка html. Этот блок кода срабатывает, когда мы выбрали любой из трех вариантов, которые я указал в массиве зависимостей.
  • Этот хук похож на useEffect, но срабатывает перед мутациями DOM.
  • Этот хук следует использовать только в том случае, если вы работаете с библиотекой CSS-in-JS и вам нужно место для внедрения стилей, в противном случае следует выбирать хуки — useEffect и useLayoutEffect. Поэтому в приведенном выше компоненте я просто продемонстрировал пример для понимания использования.

См. ниже gif, чтобы увидеть результат —

Обратитесь к части 1 этой статьи, если вы еще не ознакомились с ней — ЗДЕСЬ

Заключение

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

Если вам понравилась эта статья, поделитесь ею с друзьями и коллегами.

Ссылка на GitHub, где вы можете найти коды, использованные в примерах — https://github.com/Smriti96311/hooks-tut

Спасибо за прочтение!!