第一個:useFiler Hook
克里斯多福·帕蒂(Christopher Patty)收藏了一個非常酷的Hook,稱為「crooks"。我個人還是比較喜歡它的useFiler Hook,因為它能使我能夠在Web瀏覽器中創建虛擬文件系統。而且,它是利用瀏覽器的本地存儲來管理文件及其內容。那麼,首先,你得在你的應用程式中安裝crooks軟體包。
現在,從crooks中導入useFiler Hook。
至此,到這裡我們準備初始化掛鈎並管理虛擬文件系統。這是一個快速的示例代碼片段。
正如你可以從上面的代碼中看到,我們現在知道了add(),remove(),update(),clear()。讓我們看看如何使用它們。1、Add File:該add()函數接受一個必需的參數。在這裡,我們需要傳遞JSON可序列化的數據。
需要注意的一點是,此功能為每個新文件自動生成一個ID。但是,你仍然可以通過傳遞整數或字符串作為第二個參數來設置自定義ID。
2、Update File:update()方法接受兩個參數。第一個是文件的ID,而第二個參數用於傳遞新數據。
3、Remove File:在remove()函數中傳遞文件ID 以將其刪除。
4、Clear All Files:調用該clear()函數刪除所有文件。
第二個:useHover Hook
useHover Hook屬於「Captain hook」合集,基本上,它會跟蹤屏幕上的滑鼠光標以檢測是否將其放置在特定元素上。那麼如果是這樣,它將會觸發懸停的事件。導入Hook:
初始化useHover Hook:
此處,hoverMe指的是特定的HTML元素,而isHovered包含可以在條件語句中檢查的布爾值。例如,我們可以使用類似這樣的東西。
第三個:useFetch Hook
Steven Persia(一名MERN Stack開發人員)編寫了一份名為「 Captain hook 」 的React Hooks清單,這對日常工作非常有幫助。Hooks的以下幾個示例來自他的收藏。useFetch可用於從API獲取數據。請求完成後,它將返迴響應和錯誤(如果有)。現在,將其導入到你的項目中。
發出請求。
第四個:useSlug Hook
Slug是每個Web項目的重要組成部分。實際上,它也可以提高網站的SEO。因此,史蒂文(Steven)加入useSlug到他的「Captain hook」系列。我們可以使用它快速將任何字符串轉換為對SEO友好的代碼段。事實上它也足夠「聰明」,可以用其標準的對等音變音符號(重音符號)代替。例如,它將é或è轉換為e。與往常一樣,我們首先需要導入hook:
用法:在初始化掛鈎時,將任何字符串(例如文章標題)作為第一個參數傳遞。結果,它將返回格式正確的塊,該塊可立即用於項目中。
第五&六個:useDrag & useDrop Hooks
有一個開源的React Hooks庫叫做「 ahooks 」,它是由電子商務巨頭阿里巴巴和一些自願捐款者積極開發的。在撰寫本文時,它有大約46個Hooks。在本節中,我主要向你介紹Hooks useDrag和useDrop。你可能已經對它們的功能有所了解。但是,我不得不提的是,它們可以幫助我們實現HTML5的拖放功能。首先:安裝
導入Hooks:
用法:首先,初始化useDrag和useDropHooks。useDrag返回傳遞給DOM元素的道具。而useDrop返回返回到放置區域的道具。它還使用布爾屬性通知我們拖動元素是否在放置區域的頂部isHovering。最後,useDrop具有四個回調函數,這些函數根據放置的項的類型執行。
1、onText
2、onFiles
3、onUri
4、onDom
我們可以使用滑鼠拖動的HTML5元素。
這是一個HTML5元素,你可以在其中放置一些內容。
第七個:useDarkMode Hook
克雷格·沃克(Craig Walker)最初開發了「 React Recipes 」,這是定製的React Hooks合集。它提供了useDarkModeHook,可在網站主題的明暗模式之間切換。切換模式後,它將當前值存儲在localStorage中。這意味著在打開我們網站的所有瀏覽器選項卡上可以立即應用用戶的首選模式。首先:安裝庫
Import
示例:基本上,useDarkMode()返回兩件事,1、darkMode:一個布爾值,當激活暗模式時為true。2、setDarkMode:在明暗模式之間切換。
最後
今天,你已經了解了React Hooks在日常生活中的用法。我們只是看到了一些示例用例。但是,你可以將大量的開源Hooks作用到項目中。實際上,React Hooks的主要優點是它使我們能夠編寫更好和更實用的代碼。謝謝閱讀!