許多開發人員，當涉及到標準Web 應用程式功能時，例如：儲存和管理布林值、處理按下的按鍵或建立步進器，經常嘗試找到如何執行這個或那個功能，並且更常見的是他們找到一種方法從頭開始實現功能。
無需重新發明輪子！
各種框架（React、vue 等）的可重複使用函式庫的建立者和使用者對這種方法有這樣的反應。
對於 Vue — 例如，它是 vueuse。 （vue 實用函數）
對React來說，今天最好的一個是全新的、積極支持的reactuse（用於react hooks）
它們需要減少開發人員的生活挑戰。提前準備好開發人員在工作中可能需要的所有功能。如果他使用現成的包，他至少可以節省時間，最多可以最大限度地減少在程式碼中發現錯誤或錯誤的可能性，因為每個功能都是單獨測試的。用例實際上是巨大的。在此類庫的幫助下，您可以，例如：
這只是所有可能情況的一小部分。
VueUse 是 vue 中最受歡迎的此類庫之一。畢竟，它提供了最基本的可重複使用功能。有些人認為它是建立 Vue 應用程式時的一個標準，沒有它就不可能實現。很難不同意，該庫由兩百多個功能組成，並遵循上述意識形態。
在稱讚 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 多個鉤子。我還想指出，有絕對新的實現，這是我在其他地方從未見過的：
這樣的函式庫應該成為一種開發標準，因為它們讓你不必專注於很久以前就已經發明的小細節，你只需要導入它們並使用它們。
npm — github
以上是不要重新發明輪子！或 Vue 和 React 應用程式的實用程式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
