useSize

当前窗口，元素的大小变化

缺点

1 .并不能真实的反应div元素的大小，只是height的大小。padding,margin,border等最后也会影响表现的是不会累加的。
2 .所以虚拟列表的时候用这个就跪了，还找了很久。

// 订阅当前屏幕大小的钩子
import {useState,useLayoutEffect} from 'react'
import ResizeObserver from 'resize-observer-polyfill'
import {getTargetElement,BasicTarget} from './utils/dom'

interface Size {
    width?:number,
    height?:number,
}

export default function useSize(target:BasicTarget):Size{
    const [state,setState]=useState<Size>(()=>{
        const el=getTargetElement(target)
        return {
            width:((el||{}) as HTMLElement).clientWidth,
            height:((el||{}) as HTMLElement).clientWidth,
        }
    })

    useLayoutEffect(()=>{
        const el=getTargetElement(target)
        if(!el)return ()=>{}
        const resizeObserver=new ResizeObserver((entries)=>{
            entries.forEach((entry)=>{
                setState({
                    width:entry.target.clientWidth,
                    height:entry.target.clientHeight,
                })
            })
        })
        resizeObserver.observe(el as HTMLElement)
        return ()=>{
            resizeObserver.disconnect()
        }
    },[state,target])

    return state
}


import useSize from '../useSize'

export default function(){
  const ref = useRef<HTMLDivElement>(null);
  const size = useSize(ref);
  return (
    <div ref={ref}>
      try to resize the preview window <br />
      dimensions -- width: {size.width} px, height: {size.height} px
    </div>
  );
    
}

1 .有的时候发现这些需要计算的值，在第一时间是null,第二遍才会得出计算的值，但是别的依赖可能就取了第一次的值，如果多个依赖的话，无法实现新值变化，依赖重新计算

div大小计算

1 .box-size

1 .content-box:css给的height就是实际div的高度，clientHeight=height+padding,不算border+margin
2 .border-box:css给的height=实际height+padding

2 .clientHeight:无论怎么都是height+padding，还差上下border+上下margin大小,如果有滚动条，需要减去滚动条的大小
3 .getBoundingClientRect()：如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height
4 .怎么说就是没有margin的值
5 .offsetHeight:offsetHeight = content + border + padding

外边距折叠问题

1 .两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

1 .

计算高度

1 .这都有库。https://github.com/nkbt/react-height 但是这个也只能算出来通常理解的height+padding