介紹

許多開發人員，當涉及到標準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。

讓我們舉個例子，嘗試在庫的幫助下並僅使用普通的 React 建立清單管理。

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(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState(["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