分享7 個很棒的 React Hooks,內含它們的用法和示例

2020-12-27 三微授漁

第一個: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的主要優點是它使我們能夠編寫更好和更實用的代碼。謝謝閱讀!

相關焦點

  • 【Hooks】:[組]Awesome React Hooks
    With React 16.7 you can either:3.5. /state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8How to fetch data with React Hooks?
  • 超性感的React Hooks(三):useState
    基於這個知識點,我們可以創建一個最簡單的,有內部狀態的函數式組件。原則上來說,useState的應用知識差不多都聊完了。不過,還能聊點高級的。無論是在class中,還是hooks中,state的改變,都是異步的。如果對事件循環機制了解比較深刻,那麼異步狀態潛藏的危機就很容易被意識到並解決它。如果不了解,可以翻閱我的JS基礎進階。
  • 【Hooks】:[組]Declarative & Imperative
    "But why is this a 'more accurate implementation of the react mental model'?"React hooks allow components to be truly declarative even if they contain state and side-effects.
  • React-Router v6 新特性解讀及遷移指南
    比<Route exact>和<Route strict>更簡單的匹配規則。3.1 簡化嵌套路由定義v5中的嵌套路由必須非常明確定義,且要求在這些組件中包含許多字符串匹配邏輯(活久見啊,終於意識到這個問題了。)
  • 【Hooks】:[組]How to useReducer in React
    There are two hooks that are used for modern state management in React: useState and useReducer.Each item has a checkbox as controlled component:import React from 'react';const initialTodos = [ { id: 'a', task: 'Learn React', complete: false, }, {
  • Vue3 & React Hooks 新UI組件原理:Modal 彈窗
    2.React的PortalReact Portal之所以叫Portal,因為做的就是和「傳送門」一樣的事情:render到一個組件裡面去,實際改變的是網頁上另一處的DOM結構。第二個參數(container)則是一個 DOM 元素。在v16中,使用Portal創建Dialog組件簡單多了,不需要牽扯到componentDidMount、componentDidUpdate,也不用調用API清理Portal,關鍵代碼在 render 中,像下面這樣就行:
  • React、Vue我全都要!React Hook 實現 Vue 的11個基本功能
    喜歡分享Vue,React,Typescript等高級前端知識。 useEffect(() => {    console.log('哈哈哈哈') })當 useEffect 第二個參數不傳時, 頁面初始 和 數據更新 的時候,第一個參數函數都會執行,所以此時初始頁面時會輸出一次 哈哈哈哈 ,然後無論你點修改num或者修改
  • React 輪播動畫探索
    氛圍氣泡需求最近投入了一個需求,遇到一個需要用動畫去實現的場景。我們的產品大大管它叫氛圍氣泡,在很多應用(淘寶、抖音、bilibili)的直播間場景都會有類似這樣營造氛圍感的組件,能夠讓你感知到其他用戶在當前直播間的行為。這個東西看起來轉瞬即逝的,但背後其實是基於一套和 push 通道相關的設計:
  • 「譯」React Router v6 中非常實用的4個API
    以下4個API不僅能幫您提升工作效率,同時還可以改善您的代碼結構。OutletforwardRefuseRoutesuseLocation不論您是React的初學者,還是已經對React了如指掌,相信以下內容都會給予您一定的幫助。
  • React 靈魂 23 問,你能答對幾個?
    :2、聊聊 react@16.4 + 的生命周期相關連接:React 生命周期 我對 React v16.4 生命周期的理解3、useEffect(fn, []) 和 componentDidMount 有什麼差異?useEffect 會捕獲 props 和 state。
  • 精通react/vue組件設計之配合React Portals實現一個(Drawer)組件
    通過組件的設計過程,大家會接觸到一個完成健壯的組件設計思路和方法,也能在實現組件的過程逐漸對react/vue的高級知識和技巧有更深的理解和掌握,並且在企業實際工作做遊刃有餘.為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • React.js 性能分析
    本文最初發布於Addy Osmani博客,經原作者授權由 InfoQ 中文站翻譯並分享今天我將向大家演示如何使用 React Profiler API、Tracing API 以及 User Timing
  • 手寫React-Router源碼,深入理解其原理
    本文全部代碼已經上傳GitHub,大家可以拿下來玩玩:https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-code簡單示例
  • 讓GAN隨音樂律動的Python工具,網友:這是我見過的GAN的最佳用法 | reddit高贊
    在圖像生成過程中,向模型中輸入包含512個數值的向量來決定輸出圖像,而向量的細微變化,在輸出圖像中也會產生相應地細微的變化。因此,Lucid Sonic Dreams將從音樂的聲波中提取的數值(例如:振幅),添加到輸入向量中。對視頻中的每一幀都執行此操作,創造出隨音樂跳動和變化的藝術效果。
  • React v17.0 正式發布!
    首選,當然還是一次性升級整個應用;但你還有個可選方案,漸進式升級你的應用。舉個例子,你可能將大部分功能升級至 React v18,但保留部分懶加載的對話框或子路由在 React v17。但這並不意味著你必須進行漸進式升級。對於大多數應用來說,一次性升級仍是更好的選擇。
  • React 中的一些 Router 必備知識點
    本文首發於政採雲前端團隊博客:React 中的一些 Router 必備知識點https://www.zoo.team/article/react-router前言每次開發新頁面的時候,都免不了要去設計一個新的 URL,也就是我們的路由。其實路由在設計的時候不僅僅是一個由幾個簡單詞彙和斜槓分隔符組成的連結,偶爾也可以去考慮有沒有更「優雅」的設計方式和技巧。
  • 通過示例了解Vue過渡和動畫
    beforeEnter(el, done) {   done()}Vue Transition 高級用法上面介紹的只是一些基礎,在項目中,會遇到比較複雜的場景,這要怎麼做呢?封裝一個可重用的 transition 很簡單,在 transition 裡放個 slot,如下所示: <template>   <transition name="fade" appear>     <slot></slot
  • 我讀完了React的API,並為新手送上了一些建議
    為了操作它們的狀態,React 引入了 Hooks。Hooks 是用來「掛」到函數式組件狀態的函數,因為它們是無狀態的,所以沒有 this,也就沒有像類這樣的狀態。一個 hook 以「use」作為前綴來聲明,比如 useState。它返回狀態和一個 setter(如果需要),或僅返回狀態。
  • 這幾款基於 vue3 和 vite 的開箱即用的中後臺管理模版,讓你 yyds !
    最近一直在做前端可視化和低代碼相關的項目和技術分享
  • 即拉即用:你不知道的持續集成的3個Git Hooks詳解
    如果你已經用了一段時間的Git了,相信你可能聽說過Git Hooks,甚至可能簡單的上手玩了玩。Git Hooks在持續集成的語境中十分神奇,所以在本文中,我將深入介紹三個用例,並教你學會將現成可用的Hooks運用到你的工作流程中。 如果你還是Git Hooks的菜鳥,也完全不用擔心, 因為我們將從基礎開始。