Хук useResize для отслеживания ширины экрана в ReactJS
2 года назад·1 мин. на чтение
В этой статье напишем кастомный React хук для прослушивания ширины экрана - useResize.
Хук
Добавим эти брейкпоинты в файл констант размеров экрана.
Исходный код
useResize
довольно часто встречается в React приложениях. useResize
- хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize
будет использовать стандартные размеры экрана из bootstrap.
Брейкпоинт | id | Размер экрана |
---|---|---|
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg | ≥992px |
Extra large | xl | ≥1200px |
Extra extra large | xxl | ≥1400px |
// const-breakpoints.js export const SCREEN_SM = 576; export const SCREEN_MD = 768; export const SCREEN_LG = 992; export const SCREEN_XL = 1200; export const SCREEN_XXL = 1400;
useResize
будет возвращать ширину экрана, а также индикаторы достижения брейкпоинтов.
Подпишемся на событие resize
из window
. Значение ширины экрана будем читать из поля innerWidth
.
// use-resize.js import { useState, useEffect } from 'react'; import { SCREEN_SM, SCREEN_MD, SCREEN_LG, SCREEN_XL, SCREEN_XXL, } from './const-breakpoints'; export const useResize = () => { const [width, setWidth] = useState(window.innerWidth); useEffect(() => { const handleResize = (event) => { setWidth(event.target.innerWidth); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); return { width, isScreenSm: width >= SCREEN_SM, isScreenMd: width >= SCREEN_MD, isScreenLg: width >= SCREEN_LG, isScreenXl: width >= SCREEN_XL, isScreenXxl: width >= SCREEN_XXL, }; };
Пример работы
При достижении ширины экрана 799px, флагиisScreenSm
и isScreenMd
будут иметь значения true
.
![react_hook_use_Resize](https://it-dev-journal.ru/api/proxy/uploads/react_huk_use_Resize_3b5945aa76.jpg)
Как быстро понять хук useEffect в React
год назад·2 мин. на чтение
В этой статье углубимся в хук useEffect. Это важный инструмент при работе с React. Понимание различных способов использования useEffect позволит вам с уверенностью справляться с побочными эффектами и управлять жизненными циклами компонентов.
React компоненты в процессе своего существования проходят разные стадии, это называется жизненным циклом компонентов. Эти этапы можно разделить на три основных этапа:
1.
Когда вы передаете пустой массив зависимостей в
2.
Когда вы предоставляете массив зависимостей с определенными значениями, эффект выполняется, когда компонент монтируется и когда эти значения изменяются. Это позволяет выборочно реагировать на изменения в пропсах или состоянии компонента.
Примером использования для этого может быть функция поиска.
3.
Когда вы используете хук
- Монтирование: компонент создается и вставляется в модель DOM
- Обновление: компонент повторно визуализируется из-за изменений в его пропсах или состоянии.
- Размонтирование: компонент удаляется из модели DOM
useEffect
: с пустым массивом зависимостей, с массивом зависимостей со значениями и без массива зависимостей. Давайте начнем!
1. useEffect
с пустым массивом зависимостей
Когда вы передаете пустой массив зависимостей в useEffect
, это означает, что эффект запускается только один раз, когда компонент монтируется. Это полезно для выполнения одноразовых инициализаций или подписки на события, которые не изменяются со временем.
Вариантом использования для этого может быть получение данных из API.
В этом примере хукimport { useEffect, useState } from "react"; export default function App() { const [data, setData] = useState(null); useEffect(() => { fetch("https://mock-api.com") .then((response) => response.json()) .then((apiData) => { setData(apiData); }); }, []); return ( <div> {data && data.message} </div> ); }
useEffect
используется для получения данных из API, затем данные сохраняются в состоянии с помощью функции setData
. Так как массив зависимостей пуст, этот фрагмент кода будет выполняться только один раз при монтировании компонента.
2. useEffect
со значениями в массиве зависимостей
Когда вы предоставляете массив зависимостей с определенными значениями, эффект выполняется, когда компонент монтируется и когда эти значения изменяются. Это позволяет выборочно реагировать на изменения в пропсах или состоянии компонента.
Примером использования для этого может быть функция поиска.
В этом примере хукimport React, { useState, useEffect } from 'react'; function FilterableList({ items }) { const [filter, setFilter] = useState(''); const [filteredItems, setFilteredItems] = useState(items); useEffect(() => { const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase())); setFilteredItems(filtered.length !== 0 ? filteredItems : items); }, [filter, items]); return ( <div> <input type="text" value={filter} onChange={e => setFilter(e.target.value)} /> <ul> {filteredItems.map(item => <li key={item}>{item}</li>)} </ul> </div> ); }
useEffect
фильтрует список элементов на основе вводимых пользователем данных. Эффект запускается при каждом изменении значений фильтра или элементов, обеспечивая соответствующее обновление отфильтрованного списка.
3. useEffect
без массива зависимостей
Когда вы используете хук useEffect
без предоставления массива зависимостей (не пустого массива, а вообще без массива), это означает, что эффект будет выполняться после каждого рендеринга, то есть при монтировании и при каждом обновлении компонента из-за изменений в его пропсах или состоянии. Это может привести к проблемам с производительностью и неожиданному поведению, особенно если вы обновляете состояние в эффекте.
Честно говоря, сложно придумать хороший пример из реальной жизни, когда это использовать.
Итоги
- Если вы используете пустой массив зависимостей, блок кода будет выполнен только один раз, во время монтирования компонента.
- Если вы передаете значения в массив зависимостей, это вызовет эффект при монтировании компонента и при изменении конкретных значений в массиве зависимостей.
- Если вы используете
useEffect
без массива зависимостей, он будет выполнять код после каждого рендеринга.
useEffect
, вы сможете эффективно справляться с побочными эффектами и жизненными циклами компонентов. Не забывайте использовать эти знания с умом и адаптировать их к потребностям ваших проектов.