当需要对窗口大小变化做监听时,可以使用onresize函数。Resize Observer API 提供了一种高性能方法可以监视元素的大小更改。
使用 ResizeObserver()构造函数创建一个新对象,然后使用 ResizeObserver.observe()来监听dom对象,每dom对象的大小发生改变时,构造函数中设置的回调函数便会运行。
npm i resize-observer-polyfill --save-dev
实现当元素的高度发生改变的时候,实时展示现在的高度。
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)//目标对象发生改变之后的逻辑操作
}
})
}
})
}
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;