Перехватчики React — это мощная функция, представленная в React 16.8, которая позволяет вам повторно использовать логику с отслеживанием состояния между компонентами. С помощью хуков вы можете писать повторно используемый и компонуемый код, который легко тестировать и поддерживать.
В этой статье мы рассмотрим, как создавать пользовательские хуки React в TypeScript, и предоставим три примера пользовательских хуков, которые вы можете использовать в своих проектах.
Что такое React-хуки?
Хуки React — это функции, которые позволяют вам использовать состояние и другие функции React без написания класса. Вместо использования методов жизненного цикла или HOC вы можете использовать хуки для управления состоянием, побочными эффектами и многим другим.
Хуки бывают двух типов: встроенные хуки и пользовательские хуки. Встроенные хуки, такие как useState
, useEffect
и useContext
, предоставляются React и могут использоваться «из коробки». Пользовательские хуки, с другой стороны, — это функции, которые вы определяете сами и можете повторно использовать в компонентах.
Создание пользовательского хука React в TypeScript
Создать собственный хук легко. Это просто функция, которая использует один или несколько встроенных хуков для управления состоянием и возвращает значение или набор значений.
Вот пример простого пользовательского хука, который управляет логическим флагом:
import { useState } from "react"; | |
export function useToggle(initialValue: boolean): [boolean, () => void] { | |
const [value, setValue] = useState(initialValue); | |
const toggleValue = () => setValue(!value); | |
return [value, toggleValue]; | |
} |
Этот хук использует встроенный хук useState
для управления логическим значением и возвращает массив, который включает текущее значение и функцию для переключения значения.
Чтобы использовать этот хук в компоненте, вы можете просто вызвать его и деструктурировать результат:
import { useToggle } from "./useToggle"; | |
function App() { | |
const [isOn, toggle] = useToggle(false); | |
return ( | |
<div> | |
<button onClick={toggle}>{isOn ? "ON" : "OFF"}</button> | |
</div> | |
); | |
} |
Этот компонент использует хук useToggle
для управления логическим состоянием и отображает кнопку, которая переключает состояние.
Примеры пользовательских хуков React в TypeScript
Вот еще три примера пользовательских хуков, которые вы можете использовать в своих проектах:
использованиеLocalStorage
Этот хук позволяет вам сохранять значение в localStorage и синхронизировать его с переменной состояния:
import { useState, useEffect } from "react"; | |
export function useLocalStorage<T>( | |
key: string, | |
initialValue: T | |
): [T, (value: T) => void] { | |
const [value, setValue] = useState<T>(() => { | |
const storedValue = localStorage.getItem(key); | |
return storedValue !== null ? JSON.parse(storedValue) : initialValue; | |
}); | |
useEffect(() => { | |
localStorage.setItem(key, JSON.stringify(value)); | |
}, [key, value]); | |
const updateValue = (newValue: T) => setValue(newValue); | |
return [value, updateValue]; | |
} |
Чтобы использовать этот хук, вы можете вызвать его с ключом и начальным значением:
import { useLocalStorage } from "./useLocalStorage"; | |
function App() { | |
const [name, setName] = useLocalStorage("name", ""); | |
return ( | |
<div> | |
<input value={name} onChange={(e) => setName(e.target.value)} /> | |
<p>Hello, {name || "World"}!</p> | |
</div> | |
); | |
} |
использованиеDebounce
Этот хук позволяет отменить дребезг функции обратного вызова и отложить ее выполнение:
import { useState, useEffect } from "react"; | |
export function useDebounce<T>(value: T, delay: number): T { | |
const [debouncedValue, setDebouncedValue] = useState(value); | |
useEffect(() => { | |
const handler = setTimeout(() => { | |
setDebouncedValue(value); | |
}, delay); | |
return () => { | |
clearTimeout(handler); | |
}; | |
}, [value, delay]); | |
return debouncedValue; | |
} |
Чтобы использовать этот хук, вы можете вызвать его со значением и задержкой:
import { useDebounce } from "./useDebounce"; | |
function App() { | |
const [searchTerm, setSearchTerm] = useState(""); | |
const debouncedSearchTerm = useDebounce(searchTerm, 500); | |
useEffect(() => { | |
// fetch data with debouncedSearchTerm | |
}, [debouncedSearchTerm]); | |
return ( | |
<div> | |
<input value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> | |
</div> | |
); | |
} |
использованиеMediaQuery
Этот хук позволяет вам обнаружить текущий медиа-запрос и обновить переменную состояния:
import { useState, useEffect } from "react"; | |
export function useMediaQuery(query: string): boolean { | |
const [matches, setMatches] = useState(false); | |
useEffect(() => { | |
const mediaQuery = window.matchMedia(query); | |
setMatches(mediaQuery.matches); | |
const listener = () => { | |
setMatches(mediaQuery.matches); | |
}; | |
mediaQuery.addEventListener("change", listener); | |
return () => { | |
mediaQuery.removeEventListener("change", listener); | |
}; | |
}, [query]); | |
return matches; | |
} |
Чтобы использовать этот хук, вы можете вызвать его с помощью медиа-запроса:
import { useMediaQuery } from "./useMediaQuery"; | |
function App() { | |
const isSmallScreen = useMediaQuery("(max-width: 768px)"); | |
return ( | |
<div> | |
{isSmallScreen ? <p>Small screen</p> : <p>Large screen</p>} | |
</div> | |
); | |
} |
Заворачивать
Пользовательские хуки React — это мощный способ повторного использования логики с отслеживанием состояния между компонентами. С помощью TypeScript вы можете обеспечить безопасность типов и предотвратить распространенные ошибки программирования.
В этой статье мы рассмотрели, как создавать пользовательские хуки React в TypeScript, и предоставили три примера пользовательских хуков, которые вы можете использовать в своих проектах. Не стесняйтесь экспериментировать с ними и создавать свои собственные крючки!
Спасибо за прочтение и ознакомьтесь с некоторыми другими моими статьями:
- React-Leaflet v3: Создание картографического приложения
- Как создать пользовательский компонент слоя в React-Leaflet v3 с помощью Leaflet.Ellipse
- Как создать компонент управления React-Leaflet с помощью Leaflet-Routing-Machine
- Как создать собственный элемент управления Geoman с помощью React-Leaflet и Leaflet-Geoman-Free
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.