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

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

我意识到有很多非常有用的自定义 React Hooks。所以我开始了一个新系列，我会发布其中的一些（由我编写或从网上找到并转换为 TypeScript 的）。

如果您做了一件让您感到自豪的事情，请随时在评论中分享要点链接，我会将其添加到下一篇文章中！

1️⃣ useWindowSize 钩子

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

好吧，现在您有了一个钩子，因此您可以比以前更轻松地做到这一点！

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

下一个钩子可以让你检测特定按键的按下情况。这可以根据按下的按键触发事件或操作。例如，关闭模态框、提交表单……你知道，有很多选项。

当然，我会给你一个例子来说明如何使用它：

const closeModalKeyPress = useKeyPress("Escape");

是的，就这么简单。

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

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

const [count, setCount] = useState(0);

useInterval(() => {
  setCount(count + 1);
}, 1000);

现在我们来讨论一个用于去抖动的函数。如果你不知道它是什么，它基本上只有在一段时间内没有被调用后才会执行。

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

使用示例如下：

const [inputValue, setInputValue] = useState("");

useDebounce(() => {
// make API call
}, 500);

之前是去抖动钩子，现在轮到油门钩子了。

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

例如：

const [inputValue, setInputValue] = useState("");

useThrottle(() => {
// make API call
}, 500);

好了，我们已经读完了这篇文章，但在你离开之前，我想再说几句重要的话。

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

话虽如此，我真的很喜欢写这类文章，所以如果你也喜欢，一定要关注并点赞。这样我就能知道大家想要更多，我们也会推出更多。哦，对了，就像我在文章开头说的，如果你有什么喜欢的小技巧，可以在这里分享；我会在下一篇文章里补充！