5 个自定义 React Hooks 将改变你的代码

昨天完成我的每日文章（是的，我每天都会发布一篇关于前端开发的新文章，所以如果你想要每天的代码丸，请务必关注 😉），我去编码了一点......我开始为我正在构建的副项目编写一些自定义挂钩（我在我的 Twitter 上谈论它： @thenaubit）。

我意识到有很多非常有用的自定义 React 钩子。因此，我开始了一个新系列，我将在其中发布其中的一些内容（由我编码或在 Internet 上找到并转换为 TypeScript）。

如果你做过让你引以为豪的事情，请随时在评论中分享要点链接，我会把它添加到下面的文章中！

1️⃣ 使用WindowSize Hook

我很确定您在您从事的某些项目中需要获取用户窗口的宽度和高度。

好吧，现在你有了一个钩子，所以你可以比以前更容易地做到这一点！

import { useState, useEffect } from "react";interface WindowSize {width: number;height: number;
}const useWindowSize = (): WindowSize => {const [windowSize, setWindowSize] = useState<WindowSize>({width: window.innerWidth,height: window.innerHeight,});useEffect(() => {const handleResize = () => {setWindowSize({width: window.innerWidth,height: window.innerHeight,});};window.addEventListener("resize", handleResize);return () => {window.removeEventListener("resize", handleResize);};}, []);return windowSize;
};

这个钩子在实现响应式设计时特别有用，并且由于某些原因，您需要在某些分辨率下运行某些特定代码！

2️⃣ 使用KeyPress Hook

下一个钩子让您检测何时按下特定键。这可以根据按下的键触发事件或动作。例如，关闭模式、提交表单……你知道，有很多选择。

import { useState, useEffect } from "react";const useKeyPress = (targetKey: string): boolean => {const [keyPressed, setKeyPressed] = useState(false);const downHandler = ({ key }: KeyboardEvent) => {if (key === targetKey) {setKeyPressed(true);}};const upHandler = ({ key }: KeyboardEvent) => {if (key === targetKey) {setKeyPressed(false);}};useEffect(() => {window.addEventListener("keydown", downHandler);window.addEventListener("keyup", upHandler);return () => {window.removeEventListener("keydown", downHandler);window.removeEventListener("keyup", upHandler);};}, []);return keyPressed;
};

当然，我会举例说明如何使用它：

const closeModalKeyPress = useKeyPress("Escape");

是的，就这么简单。

3️⃣ 使用Interval Hook

这个钩子允许你使用著名的 setInterval 函数作为一个钩子！和 setInterval 函数一样，这个钩子有很多用途，比如动画、定期更新数据，甚至设置计时器。

import { useState, useEffect, useRef } from "react";const useInterval = (callback: () => void, delay: number | null) => {const savedCallback = useRef<() => void>();useEffect(() => {savedCallback.current = callback;}, [callback]);useEffect(() => {function tick() {savedCallback.current && savedCallback.current();}if (delay !== null && delay > 0) {let id = setInterval(tick, delay);return () => clearInterval(id);} else {tick();}}, [delay]);
};

你可以像这样使用这个钩子：

const [count, setCount] = useState(0);
useInterval(() => {setCount(count + 1);
}, 1000);

4️⃣ 使用Debounce Hook

现在我们将讨论一个用于去抖动的功能。如果你不知道它是什么，基本上该函数只有在经过一定时间后才会被执行而不会被调用。

这很有用，例如，对于限速 API 调用或输入更改时的状态更新，例如当您在搜索输入中键入一些文本时。

import { useEffect, useRef } from 'react';export function useDebounce(callback:Function, timeout: number = 200, deps: Array<any> = []) {const data = useRef({ firstTime: true });useEffect(() => {const { firstTime, clearFunc } = data.current;const handler = setTimeout(() => {if (clearFunc && typeof clearFunc === 'function') {clearFunc();}data.current.clearFunc = callback();}, timeout);return () => {clearTimeout(handler);};}, [timeout, ...deps]);
}export default useDebounce;

一个用法示例是：

const [inputValue, setInputValue] = useState("");
useDebounce(() => {
// make API call
}, 500);

5️⃣使用油门挂钩

之前是debounce hook，现在轮到油门hook了。

顾名思义，它是一个用来限制函数的钩子。这意味着它将每隔指定的时间间隔执行一次。这对于防止快速连续触发过多的 API 调用或事件很有用。

import { useEffect, useRef } from 'react';export const useThrottle = (callback:Function, delay: number = 200, deps: Array<any> = []) => {const lastRan = useRef(Date.now());useEffect(() => {const handler = setTimeout(function() {if (Date.now() - lastRan.current >= delay) {callback();lastRan.current = Date.now();}}, delay - (Date.now() - lastRan.current));return () => {clearTimeout(handler);};},[delay, ...deps],);
};export default useThrottle;

一个例子是：

const [inputValue, setInputValue] = useState("");
useThrottle(() => {
// make API call
}, 500);

---

好吧，我们到了文章的结尾，但在您开始之前，我想多说几句关键的事情。

第一个是这些钩子是示例，就像您在 Internet 上找到的任何其他代码一样。您不应该只是将它们复制并粘贴到您的项目中。你应该阅读它们，理解它们并改进它们！

话虽如此，我真的很喜欢写这样的文章，所以如果你也喜欢它们，一定要关注并喜欢它们。那样，我就会知道人们想要更多，我们就会拥有更多。哦，正如我在文章开头所说的那样，如果您有一些喜欢的小钩子，请在这里分享；我想在下一篇文章中添加它们！