ResizeObserver Polyfill监听元素宽高的变化，在React中的应用

当需要对窗口大小变化做监听时，可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。

原理：

使用 ResizeObserver()构造函数创建一个新对象，然后使用 ResizeObserver.observe()来监听dom对象，每dom对象的大小发生改变时，构造函数中设置的回调函数便会运行。

• resizeObserver.observe(): 监听一个dom元素
• resizeObserver.unobserve(): 注销掉监听的dom元素

安装：

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

示例

实现当元素的高度发生改变的时候，实时展示现在的高度。

（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)//目标对象发生改变之后的逻辑操作
        }
      })
    }
  })
}

（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对象发生变化后的操作逻辑赋值给dom对象
    this.onRef.handleResize = this.handleResize
    //观察的对象
    this.resizeObserver.observe(this.onRef)
  }

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

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

  render() {
     
    //组件安装时，使用dom元素调用ref回调，挂载到dom元素上时表示具体的dom元素节点
    return (
      <div id='resizeObserver' ref={
     ref => this.onRef = ref}>
        {
     this.state.height || '-'}
      </div>
    )
  }
}
export default Index;