React如何自定義hook

本篇內容主要講解“React如何自定義hook”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React如何自定義hook”吧!

什么是hook

Hook是 React 16.8 的新增特性。它通常與函數式組件同時使用?？梢允购瘮凳浇M件在不編寫 class 的情況下，可以擁有class組件的狀態、生命周期、引用等功能。

• 
  

  常用的有哪些hook

React中常用的hooks有：

• useState 狀態管理

• useEffect 生命周期

• useContext 跨組件數據傳遞

• useRef 組件引用

• ....

• 
  

  自定義hook

自定義hook其實就是自定義函數，與我們寫函數組件非常類似。自定義的hook組件的命名與系統的hooks一樣，需要以use開頭。下面我們用react+ts就來介紹一下常用的幾個自定義hook

• 獲取窗口寬高變化

實現目標：通過 useWindowSize()來實時獲取窗口的寬高

新建一個hook文件useWindowSize.ts，代碼如下：

import { useEffect, useState } from "react";

//定義size對象
interface WindowSize {
    width: number,
    height: number
}
const useWindowSize = () => {
    const [size, setSize] = useState<WindowSize>({
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
    })

    useEffect(() => {
        //監聽size變化
        window.addEventListener('resize', () => {
            setSize({
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            })
        })
        return () => {
            //組件銷毀時移除監聽
            window.removeEventListener('resize', () => {
                setSize({
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                })
            })
        }
    },[])
    return size
}
export default useWindowSize

組件中這樣使用：

import useWindowSize from './hooks/useWindowSize';
function App() {
  const size = useWindowSize()
  return (
    <div>
      <div>頁面寬度：{size.width}</div>
      <div>頁面高度：{size.height}</div>
    </div>
  )
}
export default App

在瀏覽器拖動放大縮小時，頁面上的數據可動態變化

• 獲取滾動偏移量變化

目標：通過 useWindowScroll()來實時獲取頁面的滾動偏移量

新建一個hook文件useWindowScroll.ts，代碼如下：

import { useEffect, useState } from "react"

//定義偏移量對象
interface ScrollOffset {
    x: number,
    y: number
}

const useWindowScroll = () => {
    const [off, setOff] = useState<ScrollOffset>({
        x: window.scrollX, 
        y: window.scrollY
    })
    useEffect(() => {
        //監聽
        window.addEventListener('scroll', () => {
            setOff({
                x: window.scrollX,
                y: window.scrollY
            })
        })
        return () => {
            //移除監聽
            window.removeEventListener('scroll', () => {
                setOff({
                    x: window.scrollX,
                    y: window.scrollY
                })
            })
        }
    })
    return off
}
export default useWindowScroll

組件中這樣使用：

import useWindowScroll from './hooks/useWindowScroll';
function App() {
  const offSet = useWindowScroll()

  return (
    <div style={{height: '10000px', width: '10000px'}}>
      <div>滾動y：{offSet.y}</div>
      <div>滾動x：{offSet.x}</div>
    </div>
  )
}

export default App

• 自動同步至localStorage

目標：通過 const [value, setValue] = useLocalStorage('key', 'value') 可以傳入默認的初始value和key，且每次修改value可以自動同步到localStorage中

新建一個hook類useLocalStorage，代碼如下：

import { useEffect, useState } from "react"

const useLocalStorage = (key: string, defaultValue: string) : ([string, React.Dispatch<React.SetStateAction<string>>]) => {
    const [value, setValue] = useState(defaultValue)
    useEffect(() => {
        window.localStorage.setItem(key, value)
    },[key, value])
    return [value, setValue]
}

export default useLocalStorage

組件中使用：

import useLocalStorage from './hooks/useLocalStorage';

function App() {

  const [value, setValue] = useLocalStorage('key', 'react')

  return (
    <div>

    <button onClick={() => {
        //點擊修改value，會自動同步至本地
        setValue('vue')
      }}>點擊</button>
      <div>{ value }</div>
    </div>
  )
}
export default App

到此，相信大家對“React如何自定義hook”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！