自定義Hooks函數

自定義Hooks 函數 和 用Hooks 創建組件很相似，跟我們平時用 JavaScript 寫函數幾乎一模一樣，可能就是多了些 React Hooks 的特性，自定義 Hooks 函數偏向於功能，而組件偏向於界面和業務邏輯。

自定義Hooks 函數獲取窗口大小

import React,{useState,useEffect,useCallback} from 'react'

function useWinSize(){
    const [size,setSize] = useState({  //先用useState設置size狀態
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    //編寫一個每次修改狀態的方法 onResize
    const onResize = useCallback( //使用callback，目的是為了緩存方法（useMemo是為了緩存變量)
        () => {
           setSize({
               width:document.documentElement.clientWidth,
               height:document.documentElement.clientHeight
           })
        },
        [],
    )

    //在第一次進入方法時使用useEffect 來注冊 resize 監聽事件
    useEffect(() => {
        window.addEventListener('resize:',onResize)
        return () => {
            window.removeEventListener('resize:',onResize) //為了防止一直監聽，在方法移除時，使用return 的方式移除監聽
        }
    }, [])
    return size; //最后返回size變量
}

//編寫組件並使用自定義函數
function HWinsize(){
    const size=useWinSize()
    return(
        <div>
            頁面size:{size.width} x {size.height}
        </div>
    )
}
export default HWinsize;

在瀏覽器中預覽一下結果，可以看到當我們放大縮小瀏覽器窗口時，頁面上的結果都會跟着變化。