7 интересных ловушек для React ⚛️
Введение хуков улучшило способ написания кода React для состояния, жизненного цикла компонента и редуктора.
В этой статье я представляю 7 интересных ловушек React, которые стоит попробовать в своих проектах React.
1. useSound
UseSound крючок один из самых интересных крючков , которые я нашел. Я использовал этот крючок в своем блоге - при нажатии на значок переключения темы [светлый / темный] в правом верхнем углу заголовка. Раздастся звуковой сигнал переключения 🔊 Этот крючок поднимает веб-сайт на один уровень выше 🔥. Этот хук можно использовать для уведомления о новых входящих сообщениях, для кнопки «Нравится», а также для прокрутки. 😂
использование
Установите библиотеку - npm install use-sound --saveи Импортируйте -import useSound from 'use-sound';
Пример
2. useDarkMode
UseDarkMode - это один из хуков из React Recipes 😋 Этот хук предлагает переключаться между светлым ☀️ и темным 🌙 режимом темы веб-сайта. После переключения режима он сохраняет выбранное значение в localStorage. Предпочтительный режим пользователя будет запоминаться в браузере до тех пор, пока пользователь не удалит его явным образом.
использование
Установите библиотеку - npm install react-recipes --saveи Импортируйте -import { useDarkMode } from "react-recipes";
Пример
По сути, useDarkMode()возвращает две вещи.
- darkMode : логическое значение, которое истинно, когда активен темный режим.
- setDarkMode : переключает между светлым и темным режимами.
UseSpeechRecognition крючок дает доступ к стенограмме речи с микрофона пользователя. Под капотом он использует Web Speech API 🙌 Эту ловушку можно использовать для создания собственного голосового помощника 🤖
использование
Установите библиотеку - npm install react-speech-recognition --saveи Импортируйте -import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
Пример
4. useWhyDidYouUpdate
Использование useWhyDidYouUpdate позволяет легко увидеть, какая опора была изменена 🤔, что привело к повторному рендерингу компонента 🔁
использование
🔗 крючок
Пример
5. usePrevious
UsePrevious крючок сохраняет предыдущие значения внутренне используя реф. Этот хук можно использовать в случае использования кнопки отмены.
использование
🔗 крючок
Пример
6. useOnClickOutside
UseOnClickOutside крючок используется для обнаружения щелчков вне элемента, этот крючок будет очень полезно для закрытия модального при нажатии вне модального, закрывая раскрывающийся список , когда он открыт.
использование
Установите библиотеку -npm install use-onclickoutside --save Импорт -import useOnClickOutside from 'use-onclickoutside';
Пример
7. useTheme
UseTheme крючок позволяет легко динамически изменять внешний вид вашего приложения с помощью переменных CSS. Это легкая альтернатива styled-components или любому другому фреймворку CSS-in-JS. В этой ловушке просто передайте объект, содержащий пары ключ / значение переменных CSS, которые необходимо обновить, и ловушка обновит каждую переменную в корневом элементе документа. Посмотрите демонстрацию CodeSandbox для более интересного примера, а также посмотрите таблицу стилей.
использование
🔗 крючок
Пример
Спасибо, что нашли время прочитать эту статью! 🙏
Больше контента на plainenglish.io
Suggested posts
Поиск информации о доменных именах
Отрывок из книги «Маленькие программные инструменты Sharp» Брайана П. Хогана.
Когда вы делаете запрос на facebook.com, ваш компьютер ищет доменное имя, чтобы преобразовать это доменное имя в IP-адрес, чтобы ваш компьютер мог установить это соединение.
Как избежать разрушительных последствий инсульта: уроки семейного опыта.
Введение Инсульт — это неотложная медицинская помощь, которая может случиться с кем угодно в любое время. Это происходит, когда приток крови к части мозга нарушается, что приводит к внезапной потере функции мозга.
Related posts
Финансирование удаления углерода в 24 финансовом году
Разбивка запросов на ассигнования Carbon180 по направлениям
Элисон Ли, управляющий советник по связям с правительством Процесс ежегодных ассигнований федерального правительства занимает центральное место в наших усилиях по финансированию удаления двуокиси углерода (CDR). Каждый год Carbon180 направляет запросы в различные офисы Конгресса, чтобы помочь определить, куда пойдут доллары в следующем году.
Первая детская книга о кайфе
(Предупреждение — это сатира, предназначенная для радостной подрывной деятельности — определенно не для детей) Вы видели, как ваши мама и папа прячутся на кухне и курят эти вонючие сигареты. Они говорят вам.
Как спасти планету и заработать деньги
Сколько раз вы, не задумываясь, выбрасывали пластиковую бутылку, стеклянную банку, алюминиевую банку или пакет экологически чистой энергии? Сколько раз вы хотели получить что-то взамен за их переработку? Если вы похожи на большинство людей, ответ, вероятно, много раз. Переработка часто рассматривается как хлопотное дело, рутинная работа или обязанность, не приносящая немедленных или ощутимых выгод.
Революция на рабочем месте: ведущие эксперты обсуждают гибридную и удаленную работу
В сегодняшнем быстро развивающемся бизнес-ландшафте концепция гибридной и удаленной работы приобрела беспрецедентный импульс. Поскольку компании продолжают приспосабливаться к меняющимся потребностям и ожиданиям своих сотрудников, эксперты из разных областей собрались вместе, чтобы обсудить преимущества, проблемы и будущее этого преобразующего способа работы.