react-use 基本使用


github地址:https://github.com/streamich/react-use

安裝依賴:npm i react-use

使用:(需要安裝React 16.8.0或更高版本才能使用Hooks API)

import {useToggle} from 'react-use'

傳感器

useBattery — 跟蹤設備電池狀態。
useGeolocation — 跟蹤用戶設備的地理位置狀態。
useHover and useHoverDirty — 跟蹤鼠標懸停某個元素的狀態。
useIdle — 跟蹤用戶是否處於非活動狀態。
useKey, useKeyPress, useKeyboardJs, 和 useKeyPressEvent — 追蹤按鍵。
useLocation — 跟蹤頁面導航欄的位置狀態。
useMedia — 跟蹤CSS媒體查詢的狀態。
useMediaDevices — 跟蹤連接的硬件設備的狀態。
useMotion — 跟蹤設備的運動傳感器的狀態。
useMouse and useMouseHovered — 跟蹤鼠標位置的狀態。
useNetwork — 跟蹤用戶的互聯網連接狀態。
useOrientation — 跟蹤設備屏幕方向的狀態。
usePageLeave — 當鼠標離開頁面邊界時觸發。
useScroll — 跟蹤HTML元素的滾動位置。
useSize — 跟蹤HTML元素的維度。
useStartTyping — 檢測用戶何時開始輸入。
useWindowScroll — 跟蹤 窗口 滾動位置。
useWindowSize — 跟蹤 窗口 尺寸。

用戶界面

useAudio — 播放音頻並公開其控件。
useClickAway — 當用戶點擊目標區域外時觸發回調。
useCss — 動態調整CSS。
useDrop and useDropArea — 跟蹤文件,鏈接和復制粘貼。
useFullscreen — 全屏顯示元素或視頻。
useSpeech — 從文本字符串合成語音。
useVideo — 播放視頻,跟蹤其狀態,以及公開播放控件。
useWait — UI的復雜等待管理。

動畫效果

useRaf — 在每個 requestAnimationFrame 上重新呈現組件。
useSpring — 根據彈簧動力學隨時間插入數字。
useTimeout — 超時后返回true。
useTween — 重新渲染組件,同時補間0到1之間的數字。
useUpdate — 返回一個回調,在調用時重新呈現組件。

副作用

useAsync — 解析一個 async 函數。
useAsyncFn — 異步函數的狀態管理。
useAsyncRetry — useAsync 帶有 retry()方法。
useBeforeUnload — 當用戶嘗試重新加載或關閉頁面時顯示瀏覽器警報。
useCopyToClipboard — 將文本復制到剪貼板。
useDebounce — 防抖函數。
useFavicon — 設置頁面的favicon。
useLocalStorage — 管理localStorage中的值。
useLockBodyScroll — 鎖定body元素的滾動。
useSessionStorage — 管理sessionStorage中的值。
useThrottle and useThrottleFn — 節流一個函數。
useTitle — 設置頁面標題。

生命周期

useEffectOnce — 僅運行一次的修改后的useEffect。
useEvent — 訂閱事件。
useLifecycles — 調用mount和unmount回調。
useRefMounted — 跟蹤組件是否已掛載。
usePromise — 僅在安裝組件時解析promise。
useLogger — 在組件經歷生命周期時登錄控制台。
useMount — 調用mount回調。
useUnmount — 調用unmount回調。
useUpdateEffect — 僅在更新時運行一個effect。
useDeepCompareEffect — 運行一個effect通過深度比較其依賴項。

狀態

createMemo — memoized hooks的工廠鈎子。
useGetSet — 返回狀態 getter get() 而不是原始狀態。
useGetSetState — 就像 useGetSet 和 useSetState 有個孩子。
useObservable — 跟蹤Observable的最新值。
useSetState — 創建類似this.setState的setState方法。
useToggle and useBoolean — 跟蹤布爾值的狀態。
useCounter and useNumber — 跟蹤數字的狀態。
useList — 跟蹤數組的狀態。
useMap — 跟蹤對象的狀態。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM