Перехватчики 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];
}
view raw useToggle.ts hosted with ❤ by GitHub

Этот хук использует встроенный хук useState для управления логическим значением и возвращает массив, который включает текущее значение и функцию для переключения значения.

Чтобы использовать этот хук в компоненте, вы можете просто вызвать его и деструктурировать результат:

import { useToggle } from "./useToggle";
function App() {
const [isOn, toggle] = useToggle(false);
return (
<div>
<button onClick={toggle}>{isOn ? "ON" : "OFF"}</button>
</div>
);
}
view raw useToggleUsage.tsx hosted with ❤ by GitHub

Этот компонент использует хук 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];
}
view raw useLocalStorage.ts hosted with ❤ by GitHub

Чтобы использовать этот хук, вы можете вызвать его с ключом и начальным значением:

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>
);
}
view raw useLocalStorageUsage.tsx hosted with ❤ by GitHub

использование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;
}
view raw useDebounce.ts hosted with ❤ by GitHub

Чтобы использовать этот хук, вы можете вызвать его со значением и задержкой:

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>
);
}
view raw useDebounceUsage.tsx hosted with ❤ by GitHub

использование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;
}
view raw useMediaQuery.ts hosted with ❤ by GitHub

Чтобы использовать этот хук, вы можете вызвать его с помощью медиа-запроса:

import { useMediaQuery } from "./useMediaQuery";
function App() {
const isSmallScreen = useMediaQuery("(max-width: 768px)");
return (
<div>
{isSmallScreen ? <p>Small screen</p> : <p>Large screen</p>}
</div>
);
}
view raw useMediaQueryUsage.tsx hosted with ❤ by GitHub

Заворачивать

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

В этой статье мы рассмотрели, как создавать пользовательские хуки React в TypeScript, и предоставили три примера пользовательских хуков, которые вы можете использовать в своих проектах. Не стесняйтесь экспериментировать с ними и создавать свои собственные крючки!

Спасибо за прочтение и ознакомьтесь с некоторыми другими моими статьями:

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.