當(dāng)需要對(duì)窗口大小變化做監(jiān)聽時(shí)，可以使用onresize函數(shù)。Resize Observer API 提供了一種高性能方法可以監(jiān)視元素的大小更改。

原理：

使用 ResizeObserver()構(gòu)造函數(shù)創(chuàng)建一個(gè)新對(duì)象，然后使用 ResizeObserver.observe()來(lái)監(jiān)聽dom對(duì)象，每dom對(duì)象的大小發(fā)生改變時(shí)，構(gòu)造函數(shù)中設(shè)置的回調(diào)函數(shù)便會(huì)運(yùn)行。

• resizeObserver.observe(): 監(jiān)聽一個(gè)dom元素
• resizeObserver.unobserve(): 注銷掉監(jiān)聽的dom元素

安裝：

npm i resize-observer-polyfill --save-dev

示例

實(shí)現(xiàn)當(dāng)元素的高度發(fā)生改變的時(shí)候，實(shí)時(shí)展示現(xiàn)在的高度。

（1）封裝 resizeObserver 方法

resizeObserver.js

import ResizePolyfill from 'resize-observer-polyfill';

export default () => {
  if (window.resizeObserver) {
    return window.resizeObserver
  }
  let observer = window.resizeObserver;
  if (!observer) {
    observer = ResizePolyfill
  }
  
  return new observer(entities => {
    if (entities && entities.length) {
      entities.forEach(entity => {
        //contentRect:位置大小信息
        //target:dom信息
        const { contentRect, target } = entity;
        const { handleResize } = target;
        if (handleResize) {
          handleResize(contentRect, target)//目標(biāo)對(duì)象發(fā)生改變之后的邏輯操作
        }
      })
    }
  })
}

（1）組件渲染

index.js

import React from 'react';
import resizeObserver from './resizeObserver';

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      height: ''
    }
    this.onRef = null
    this.resizeObserver = resizeObserver()
  }
  componentDidMount() {
    //dom對(duì)象發(fā)生變化后的操作邏輯賦值給dom對(duì)象
    this.onRef.handleResize = this.handleResize
    //觀察的對(duì)象
    this.resizeObserver.observe(this.onRef)
  }

  handleResize = (contentRect, ele) => {
    this.setState({
      height: ele.offsetHeight
    })
  }

  componentWillUnmount() {
    this.resizeObserver.unobserve(this.onRef);
  }

  render() {
    //組件安裝時(shí)，使用dom元素調(diào)用ref回調(diào)，掛載到dom元素上時(shí)表示具體的dom元素節(jié)點(diǎn)
    return (
      <div id='resizeObserver' ref={ref => this.onRef = ref}>
        {this.state.height || '-'}
      </div>
    )
  }
}
export default Index;