你应该已经在使用的 5 个小型且隐藏的 React 库

如果您像我一样，喜欢在 NPM 目录中寻找小宝石来改进您的开发流程，那么今天就是您的幸运日。

我正在开始一系列新文章，其中我将展示一些我发现并每天使用的小型且鲜为人知的库，它们将为您省去很多麻烦。

那么，我们开始吧！

1. Urlcat

Urlcat 是一个小型 Javascript 库，可以非常方便地构建 URL 并避免常见错误。

是的，您可以使用 URL API 来构建 URL。但是，除了构建 URL 之外，您还需要自己处理一些细节。

这就是我喜欢这个库的原因。它简直就是“即插即用”。你不需要学习复杂的模式，也不需要花费数小时去查阅文档。

因此，请随意尝试一下：https://github.com/balazsbotond/urlcat。

2. 使用Hooks-ts

如果你是一名 React 开发者，你肯定正在使用 Hooks（我希望如此）。如果是这样，那么你可能很多时候需要为一些小事创建自定义 Hook。例如，处理暗黑模式。或者处理窗口大小调整事件。或者其他很多情况。

UseHooks 是一个小型库，具有针对所有这些小案例的编码良好、文档齐全且类型齐全（对于 Typescript 用户而言）的钩子，因此您可以专注于项目本身。

您可以在这里查看：https://github.com/juliencrn/usehooks-ts。

3. Logt

我喜欢随处保存日志，这样当需要知道发生了什么事情时，我就可以检查它们。

当我编写前端代码时，我也需要这些日志。但有一些前提条件：

• 它必须是完全类型的（这样我就可以毫无问题地在 Typescript 中使用它）
• 它一定很小
• 它必须有彩色的标签（这样我就能很快知道日志类型）
• 它必须有日志级别
• 它必须有某种方法根据条件隐藏一些日志（比如它是否是生产版本）
• 必须能够将这些日志发送到其他地方（例如 Sentry）

经过大量时间的研究（几乎开始编写自己的代码），我发现 Logt不仅满足我的所有要求，还满足了一些其他要求。100
% 推荐！https://github.com/sidhantpanda/logt

4.可加载组件

如果您正在尝试优化您的 React 应用程序，您可能正在使用 React.lazy和 Suspense 来延迟加载组件。

那就好。

但还有更好的方法！比如这个库。显然，在本文中，我无法完整解释为什么你应该从 React.lazy 切换到这个库，但你可以随意查看作者的这篇文章。

基本上，它支持SSR（服务器端渲染）、库拆分，甚至完全动态导入。还不错吧？

最棒的是，它真的很容易使用，几乎即插即用。快来试试吧！https://github.com/gregberge/loadable-components

5. Emoji Mart

在处理不同的项目时，我总是需要处理表情符号。它现在随处可见。而且我通常需要在项目中添加一些表情符号选择器组件。

这并不复杂。但随后你会收到更多要求：必须延迟加载表情符号，必须支持国际化，必须允许搜索，必须允许使用与Slack相同的查询文本……

这需要时间。我可以做到。但客户通常更希望我专注于项目本身。所以……我找到了这个小图书馆。一个漂亮又实用的图书馆。

让我来告诉你，Emoji Mart！https://github.com/missive/emoji-mart

如果你和我一样，喜欢寻找这类小巧实用的库，它们简单易用，非常适合集成到你的项目中。所以，别担心。我已经准备好了一份长长的清单，可以分享给大家。这是本系列的前五篇。记得关注我，以便我尽快发布后续文章！

与此同时……

🌎 让我们联系起来！

• 推特：@thenaubit