Я начал серию статей под названием «Общие паттерны проектирования React», в которой я хочу попрактиковаться друг с другом в некоторых основных паттернах проектирования, используемых в React. Чтобы мы могли быть достаточно уверенными, чтобы применять их в нашей повседневной разработке.
Знание этих паттернов полезно, потому что это может сэкономить наше время как разработчиков, и это представит приложение как высокопроизводительное и восхитительное для наших клиентов.
Пользовательские крючки
Один из основных паттернов проектирования, который мы используем ежедневно, — это «пользовательские крючки». Он широко используется как предпочтительный способ модуляции и применения принципа DRY в нашем приложении. Мы можем разделить сложное поведение между несколькими компонентами с помощью пользовательских крючков.
Пример
хук useDebounce
Совет: Debounce откладывает вызов функции до тех пор, пока не истекут миллисекунды ожидания с момента последнего вызова отложенной функции.
import { useEffect, useState } from 'react'
function useDebounce<T>(value: T, delay?: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value)
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
return () => {
clearTimeout(timer)
}
}, [value, delay])
return debouncedValue
}
export default useDebounce
Используя функцию возврата useEffect
после изменения value
или delay
, React очищает идентификатор таймера и функция внутри setTimeout
не будет запущена. Поэтому она отлаживается. 👌
Использование
import React, { ChangeEvent, useEffect, useState } from 'react'
import { useDebounce } from 'usehooks-ts'
export default function Component() {
const [value, setValue] = useState<string>('')
const debouncedValue = useDebounce<string>(value, 500)
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value)
}
// Fetch API (optional)
useEffect(() => {
// Do fetch here...
// Triggers when "debouncedValue" changes
}, [debouncedValue])
return (
<div>
<p>Value real-time: {value}</p>
<p>Debounced value: {debouncedValue}</p>
<input type="text" value={value} onChange={handleChange} />
</div>
)
}
Кредит: useHooks-ts *
Библиотеки
Вам не обязательно создавать общие сценарии с нуля. Существуют фантастические пакеты, которые можно быстро изучить и использовать. Здесь я перечислил несколько надежных игроков.
react-use * ⭐️ 29.6k / 🔽 958k
ahooks * ⭐️ 9.1k / 🔽 74k
awesome-react-hooks * ⭐️ 8.1k / 🔽 74k
usehooks-ts * ⭐️ 1.6k / 🔽 44k
react-recipes * ⭐️ 850 / 🔽 1.2k
react-hanger * ⭐️ 1.8k / 🔽 3.3k
Ссылки
React offcial doc *