不要重新發明輪子！或 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中文網其他相關文章！