不要重新发明轮子！或者 Vue 和 React 应用程序的实用程序库

介绍

许多开发人员，当涉及到标准 Web 应用程序功能时，例如：存储和管理布尔值、处理按下的按键或创建步进器，经常尝试找到如何执行这个或那个功能，并且更常见的是他们找到一种方法从头开始实现功能。

无需重新发明轮子！

各种框架（React、vue 等）的可重用函数库的创建者和用户对这种方法有这样的反应。

对于 Vue — 例如，它是 vueuse。 （vue 实用函数）

对于React来说，今天最好的一个是全新的、积极支持的reactuse（用于react hooks）

这些库解决了什么问题？

它们需要减少开发人员的生活挑战。提前准备好开发人员在工作中可能需要的所有功能。如果他使用现成的包，他至少可以节省时间，最多可以最大限度地减少在代码中发现错误或错误的可能性，因为每个功能都是单独测试的。用例实际上是巨大的。在此类库的帮助下，您可以，例如：

1. 使用网络套接字
2. 提出疑问
3. 检测用户的地理位置
4. 使用本地存储
5. 轻松创建模态窗口

这只是所有可能情况的一小部分。

为什么 VueUse 很酷？

VueUse 是 vue 中最受欢迎的此类库之一。毕竟，它提供了最基本的可重用功能。有些人认为它是构建 Vue 应用程序时的一个标准，没有它就不可能实现。很难不同意，该库由两百多个功能组成，并遵循上述意识形态。

React 的最佳替代方案

在称赞 vueuse 是完美实现一个伟大想法的最佳方式的同时，我们不应该忘记排名第一的 js 库/框架——React。而这里的情况更令人不快。毕竟，React 没有成熟的、可靠的、广泛的且唯一的库。不同的开发人员进行了一些尝试，但其中之一的钩子太少了（在 React 中它们是钩子，是的），某处有使用未处理的 api 构建的钩子。

为了改善这种情况，作为 vueuse 的替代品，但在 React 中出现了 Reactuse。

让我们举个例子，尝试在库的帮助下并仅使用香草反应来创建列表管理。

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

我们获取value（数组值）、set（分配另一个数组值的函数）、push（向数组添加值的函数）、removeAt（按索引删除）、updateAt（按索引更改值）、clear（清除）数组），重置（重置为默认值）
现在，在香草反应上获取所有这些状态和功能的代码：

const [value, setValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

我们得到了完全相同的方法和状态。而且代码更小更简单

该库得到积极维护，添加了新的钩子，有一个带有文档的方便网站，钩子使用简单的源代码并具有更复杂的 API。现在已经实现了 80 多个钩子。我还想指出，有绝对新的实现，这是我在其他地方没有见过的：

• usePaint — 用于创建画布并在其上绘图。你设置画布，钩子允许你在上面画画，调整画笔的大小、颜色、不透明度以及状态“绘制”或“现在绘制”
• useStopwatch — 用于创建秒表
• useEyeDropper — 使用滴管进行颜色选择
• 大量的钩子与用户设备或浏览器 API 一起使用（useMemory、useOperatingSystem、useClipboard、useBrowserLanguage、useHash 等）

结论

这样的库应该成为一种开发标准，因为它们让你不必专注于很久以前就已经发明的小细节，你只需要导入它们并使用它们即可。

反应使用链接

npm — github

以上是不要重新发明轮子！或者 Vue 和 React 应用程序的实用程序库的详细内容。更多信息请关注PHP中文网其他相关文章！