react hook監聽窗口大小

學習hook使用小demo： 

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

function ChangeSize(){
    const [size,setSize] = useState({
            width:document.documentElement.clientWidth,
            hieght:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight,
        })
    },[])

    useEffect(()=>{
        window.addEventListener('resize',onResize);
        return (()=>{
            window.removeEventListener('resize',onResize)
        })
    },[])

    return size;
}

 

 

使用 ：

// 使用 在組件中引入方法ChangeSize;
// let size  = ChangeSize();
//     size.width;//get width;
//     size.height;//get height;