Кастомный React хук для изменения темы веб-приложения
2 года назад·2 мин. на чтение
Пишем кастомный React хук useTheme, который динамически меняет тему веб-приложения с помощью CSS переменных.
В этой статье напишем кастомный хук на ReactJS, который будет менять тему веб-приложения.
Особенности хука useTheme, который мы реализуем:
Код хука
Сам хук выглядит довольно просто.
Использование хука
Здесь добавлены две кнопки, каждая из которых отвечает за переключение на светлую или темную тему. Они обернуты в
- использует CSS переменные
- быстро кастомизируется
- плавный переход между темами
- умеет сохранять выбранную тему в local storage
Код хука useTheme
Сам хук выглядит довольно просто.
// hooks/use-theme.js import { useLayoutEffect, useState } from 'react' const isDarkTheme = window?.matchMedia('(prefers-color-scheme: dark)').matches const defaultTheme = isDarkTheme ? 'dark' : 'light' export const useTheme = () => { const [theme, setTheme] = useState( localStorage.getItem('app-theme') || defaultTheme ) useLayoutEffect(() => { document.documentElement.setAttribute('data-theme', theme) localStorage.setItem('app-theme', theme) }, [theme]) return { theme, setTheme } }
prefers-color-scheme
используется для определения выбранной пользователем темы (светлая или темная). Пользователь указывает свои предпочтения через настройку операционной системы или через настройку user agent.
document.documentElement.setAttribute('data-theme', theme)
- этой строчкой мы добавляем кастомный data-атрибут в тег html
. Таким образом, например, при выборе светлой темы в теге html
появится data-атрибут data-theme="light"
.
Добавление CSS переменных
Далее мы должны указать CSS переменные, которые будут иметь различные значение для разных тем. Например,--button-text-color
имеет значение #ffffff
при темной теме и #252525
- при светлой.
/* index.css */ html[data-theme='dark'] { --button-text-color: #ffffff; --button-background-color: #4e005c; --button-border-color: #ba8fc2; --background-color: #292929; --icon-color: #ba8fc2; } html[data-theme='light'] { --button-text-color: #252525; --button-background-color: #f9d4ff; --button-border-color: #4e005c; --background-color: #dfdfdf; --icon-color: #4e005c; }
Применение CSS переменных
Далее нам нужно применить эти CSS переменные к соответствующим элементам. Добавлениеtransition
дает плавность при переключении тем.
/* App.css */ .app__container { background-color: var(--background-color); transition: background-color 200ms linear; } .app__logo { color: var(--icon-color); transition: color 500ms linear; } .app__button, .app__button:hover, .app__button:focus, .app__button:active, .app__button:not(:disabled):not(.disabled):active { color: var(--button-text-color); background-color: var(--button-background-color); border-color: var(--button-border-color); transition: color 500ms linear, background-color 500ms linear, border-color 500ms linear; }
Использование хука useTheme
Здесь добавлены две кнопки, каждая из которых отвечает за переключение на светлую или темную тему. Они обернуты в ButtonGroup
.
Элементы логотип, контейнер и кнопка имеют соответствующие CSS классы, которые мы описали выше - app__logo
, app__container
и app__button
. В этих классах были использованы CSS переменные.
Исходный кодimport React from 'react' import Button from 'react-bootstrap/Button' import ButtonGroup from 'react-bootstrap/ButtonGroup' import { FaCoffee } from 'react-icons/fa' import { useTheme } from './hooks/use-theme' import './App.css' export default function App() { const { theme, setTheme } = useTheme() const handleLightThemeClick = () => { setTheme('light') } const handleDarkThemeClick = () => { setTheme('dark') } return ( <div className="app__container w-100 h-100 d-flex flex-column"> <div className="p-3 d-flex justify-content-end"> <ButtonGroup aria-label="Theme toggle"> <Button variant="secondary" onClick={handleLightThemeClick}> Light </Button> <Button variant="secondary" onClick={handleDarkThemeClick}> Dark </Button> </ButtonGroup> </div> <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center"> <FaCoffee size={100} className="app__logo mb-5" /> <div className="d-flex"> <Button className="app__button" type="button"> Subscribe </Button> </div> </div> </div> ) }
Продвинутое использование функций обратного вызова в React
2 года назад·4 мин. на чтение
В этой статье мы рассмотрим некоторые продвинутые функций обратного вызова (колбэк функции) в React, которые помогут вам создавать более эффективные и отзывчивые приложения. В частности, мы рассмотрим мемоизацию, debounce и throttle, а также разберем реальные примеры реализации этих методов в вашем коде.
Продвинутое использование функций обратного вызова являются неотъемлемой частью создания производительных и масштабируемых приложений, и это особенно актуально в разработке React приложений. Senior React разработчику важно иметь глубокое понимание продвинутых практик и того, как эффективно применять их в приложениях React.
К концу этой статьи вы будете иметь четкое представление об этих передовых методах обратного вызова и сможете использовать их в своих собственных приложениях React для повышения производительности и пользовательского опыта.
Что такое функции обратного вызова (callback, колбэк)?
Функция обратного вызова — это функция, которая передается в качестве аргумента другой функции и выполняется позже. Обратные вызовы используются для обработки асинхронного кода, например ожидания извлечения данных с сервера или обработки событий пользовательского ввода. В React обратные вызовы широко используются для обработки взаимодействия с пользователем и обновления состояния приложения. Например, когда пользователь нажимает кнопку, запускается функция обратного вызова для обработки события клика и соответствующего обновления состояния приложения.Пример простой функции обратного вызова
Вот базовый пример использования обратного вызова в React:В этом примере мы создадим классimport React from 'react'; class MyComponent extends React.Component { handleClick() { console.log('Button clicked'); } render() { return ( <button onClick={this.handleClick}>Click me</button> ); } }
MyComponent
, который расширяет класс React.Component
. Мы определяем метод handleClick
, который пишет сообщение в консоли при нажатии кнопки. Затем мы рендерим элемент button
с атрибутом onClick
, который задается методом handleClick
.
Этот пример представляет собой простую демонстрацию того, как обратные вызовы могут использоваться в React для обработки взаимодействий с пользователем.
Продвинутые функции обратного вызова
Теперь, когда мы рассмотрели основы обратных вызовов в React, давайте рассмотрим некоторые продвинутые функции обратного вызова, которые могут помочь senior инженерам создавать более эффективные и масштабируемые приложения.Мемоизация (memoization)
Мемоизация — это метод, используемый для оптимизации производительности функции путем кэширования ее результатов на основе входных параметров. Это может помочь уменьшить количество вызовов функции и повысить производительность приложения. В React запоминание можно использовать для оптимизации производительности компонентов, которые часто повторно рендерятся. Кэшируя результаты функции, мы можем избежать дорогостоящих вычислений, которые повторяются каждый раз при повторном рендеринге компонента. Вот пример того, как использовать мемоизацию в React:В этом примере мы используем хукimport React, { useMemo } from 'react'; function MyComponent(props) { const result = useMemo(() => { // Дорогостоящее вычисление return props.data.map(item => item * 2); }, [props.data]); return ( <div>{result}</div> ); }
useMemo
для запоминания результата дорогостоящих вычислений. Хук принимает два аргумента: функцию, которая выполняет дорогостоящие вычисления, и массив зависимостей, которые запускают вычисления при их изменении.
Используя хук useMemo
, мы можем избежать дорогостоящих вычислений, когда массив props.data
не изменяется.
Debounce
Debounce — это метод, используемый для предотвращения вызова функции несколько раз за короткий период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React debounce можно использовать для обработки событий пользовательского ввода, таких как ввод в поле поиска. Применяя debounce для функции, которая обрабатывает событие ввода, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример того, как использовать отмену в React:В этом примере мы используем библиотекуimport React, { useState, useEffect } from 'react'; import debounce from 'lodash.debounce'; function MyComponent() { const [searchQuery, setSearchQuery] = useState(''); useEffect(() => { const debouncedSearch = debounce(handleSearch, 500); document.addEventListener('keyup', debouncedSearch); return () => { document.removeEventListener('keyup', debouncedSearch); }; }, []); function handleSearch() { // Имитация вызова API console.log('Searching for:', searchQuery); } function handleChange(event) { setSearchQuery(event.target.value); } return ( <div> <input type="text" onChange={handleChange} /> </div> ); }
lodash.debounce
для отмены debounce’а функции handleSearch
. Мы добавляем прослушиватель событий к объекту документа для события keyup
, которое запускает функцию с debounce’ом. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти.
Применив debounce к функции handleSearch
, мы можем предотвратить ее многократный вызов за короткий промежуток времени, что может помочь повысить производительность приложения.
Throttle
Throttle — это метод, используемый для ограничения количества вызовов функции за заданный период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React throttle можно использовать для обработки событий пользовательского ввода, таких как прокрутка или изменение размера окна. Регулируя функцию, обрабатывающую входное событие, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример использования throttle в React:В этом примере мы используем библиотекуimport React, { useState, useEffect } from 'react'; import throttle from 'lodash.throttle'; function MyComponent() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const throttledScroll = throttle(handleScroll, 500); window.addEventListener('scroll', throttledScroll); return () => { window.removeEventListener('scroll', throttledScroll); }; }, []); function handleScroll() { const position = window.pageYOffset; setScrollPosition(position); } return ( <div> <p>Scroll position: {scrollPosition}</p> <div style={{ height: '2000px' }}> Content here </div> </div> ); };
lodash.throttle
для throttle'а функции handleScroll
. Мы добавляем прослушиватель событий к объекту окна для события scroll
, которое запускает функцию регулирования. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти.
Применив throttle на функцию handleScroll
, мы можем ограничить количество вызовов за заданный период времени, что может помочь повысить производительность приложения.