平时写项目应该经常会遇见表格动态高度适应不同屏幕和浏览器调整窗口大小的问题,一般解决办法就是使用 resize
事件来监听窗口改变,如果我要监听 textarea
的大小来做些效果,resize
事件就没办法了,因为它不能监听 DOM 的改变,此时我们就的用一个新的 API ,ResizeObserver 来监听 DOM 尺寸,使用 ResizeObserver
可以监听 document.body 或 document.documentElement
DOM 的变化所以完全可以替代resize
事件,也就说 ResizeObserver
是 resize
的超集。因为 ResizeObserver
不兼容 IE 浏览器,所以我们通过 polyfill
来使用,我选择的是 @juggle/resize-observer
这个库,当然你也可以选择 resize-observer-polyfill
,你随意 。
如果你不会使用 ResizeObserver
,请去这个链接 学习 :检测DOM尺寸变化JS API ResizeObserver简介
接下来我们模仿 Umi Hooks
的 useSize来做一个 useSize
:一个用于监听 dom
节点尺寸变化的 Hook
。
一、先自定义 useSize 实现 resize 方法
设计一个简单的 useSize,监听 document.body
来实现 resize
事件。
自定义的 useSize
组件:
import {
ResizeObserver } from '@juggle/resize-observer';
import {
useEffect, useState } from 'react';
function useSize(ref) {
/* state 用来存储 DOM 的宽和高 */
const [ state, setState ] = useState(function() {
return {
width: ref.clientWidth,
height: ref.clientHeight
};
});
/* useEffect