hook控制浏览器的方法_一个用于监听 dom 节点尺寸变化的 Hook

平时写项目应该经常会遇见表格动态高度适应不同屏幕和浏览器调整窗口大小的问题，一般解决办法就是使用 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