useSize

监听元素/ window 尺寸变化 Hook

代码演示

监听元素变化

width: 0
height: 0

当前元素 border: 10px, padding: 10px

border-boxcontent-box

Live Editor

Copy

function Example() { const elementRef = useRef() const [box, setBox] = useState('border-box') const size = useSize(elementRef, { box }) return ( <div> <div ref={elementRef} style={{ height: 80, border: '10px solid #000', padding: 10, background: 'rgba(0, 0, 0, 0.05)' }} > width: {size.width} <br /> height: {size.height} </div> <p style={{ marginTop: 20 }}>当前元素 border: 10px, padding: 10px</p> <Radio.Group value={box} onChange={e => setBox(e.target.value)}> <Radio.Button value="border-box">border-box</Radio.Button> <Radio.Button value="content-box">content-box</Radio.Button> </Radio.Group> </div> ) }

function Example() {
  const elementRef = useRef()
  const [box, setBox] = useState('border-box')
  const size = useSize(elementRef, { box })
  return (
    <div>
      <div
        ref={elementRef}
        style={{
          height: 80,
          border: '10px solid #000',
          padding: 10,
          background: 'rgba(0, 0, 0, 0.05)'
        }}
      >
        width: {size.width} <br />
        height: {size.height}
      </div>
      <p style={{ marginTop: 20 }}>当前元素 border: 10px, padding: 10px</p>
      <Radio.Group value={box} onChange={e => setBox(e.target.value)}>
        <Radio.Button value="border-box">border-box</Radio.Button>
        <Radio.Button value="content-box">content-box</Radio.Button>
      </Radio.Group>
    </div>
  )
}

监听窗口尺寸变化

width: 0
height: 0

Live Editor

Copy

function Example() { const size = useSize(typeof window === 'undefined' ? null : window) return ( <div> <div style={{ height: 80, padding: 10, background: 'rgba(0, 0, 0, 0.05)' }} > width: {size.width} <br /> height: {size.height} </div> </div> ) }

function Example() {
  const size = useSize(typeof window === 'undefined' ? null : window)
  return (
    <div>
      <div
        style={{
          height: 80,
          padding: 10,
          background: 'rgba(0, 0, 0, 0.05)'
        }}
      >
        width: {size.width} <br />
        height: {size.height}
      </div>
    </div>
  )
}

API

type UseSize = (
  target: React.MutableRefObject<Element> | Element | Window,
  watcherOrOptions?: Watcher | Option,
  options?: Option
) => Size

target

可以是以下三种对象：

• Dom ref
• Element
• window

watcher

type Watcher = (newSize: Size, oldSize: Size) => void | boolean

监听尺寸变化回调函数，函数返回 true 则更新组件；返回 false，则不更新组件；如果没有返回值，根据依赖标记按需更新（比如只使用了返回的 width，当且仅当 width 变化时，才更新组件）

Options

参数	说明	必选	类型	默认值
box	选择那种盒子的尺寸，content-box 或 border-box	-	content-box | border-box	border-box

Size

参数	说明	类型
width	宽度	number
height	高度	number