useComponentSize

查看每一个组件的大小

import React,{useState,useLayoutEffect}from 'react'

function getSize(el){
    if(!el){
        return {}
    }
    return {
        width:el.offsetWidth,
        height:el.offsetHeight,
    }
    // 之前求高度都是用的getComputedClientRect()这个方法
}

export default function useComponentSize(ref){
    let [size,setSize]=useState(getSize(ref.current))
    
    function handleResize(){
        if(ref&&ref.current){
            setSize(getSize(ref.current))
        }
    }

    useLayoutEffect(()=>{
        handleResize()
        // 第一次初始化就执行一遍
        
        let resizeObserver=new ResizeObserver(()=>handleResize())
        // 定义一个检测变动的状态机
        resizeObserver.observe(ref.current)
        // 把这个检测机制绑定到当前元素
        return ()=>{
            resizeObserver.disconnect(ref.current)
            resizeObserver=null
        }

    },[])

    return size
}