这里因为我页面基本都是栅格布局写的 分很多部分 UI要求各个宽度下 展示的是不一样的
所以产生了监听某个dom宽度 和监听window宽度的需求

以下为hook主体部分

import { useEffect, useState } from 'react';
interface sizeState {
  width: number;
  height: number;
  span16?: number;
  span12?: number;
  span8?: number;
  span6?: number;
  auto6?: number;
  auto12?: number;
}

const getTargetElement = (target: any, defaultElement = window) => {
  if (!target) {
    return defaultElement;
  }

  let targetElement;

  if (typeof target === 'function') {
    targetElement = target();
  } else if ('current' in target) {
    if (target.current) {
      targetElement = target.current;
    } else {
      return defaultElement;
    }
  } else {
    targetElement = target;
  }

  return targetElement;
};

const useSize = (target?: any) => {
  const winw = window.innerWidth
  const [state, setState] = useState<sizeState>({
    width: winw,
    height: window.innerHeight,
    span16: winw < 1260 ? 24 : 16,
    span12: winw < 1260 ? 24 : 12,
    span8: winw < 1260 ? 24 : 8,
    span6: winw < 1260 ? 12 : 6,
    auto6: winw < 1380 && winw > 1260 ? 8 : winw < 1260 ? 12 : 6,
    auto12: winw > 1600 ? 8 : winw < 1260 ? 24 : 12,
  });

  useEffect(() => {
    const targetElement = getTargetElement(target);
    if (!targetElement) {
      return;
    }
    let observer: ResizeObserver | null = null;
    let handleResize: () => void;
    if (targetElement === window) {
      handleResize = () => {
        const winw = window.innerWidth
        setState({
          width: winw,
          height: window.innerHeight,
          span16: winw < 1260 ? 24 : 16,
          span12: winw < 1260 ? 24 : 12,
          span8: winw < 1260 ? 24 : 8,
          span6: winw < 1260 ? 12 : 6,
          auto6: winw < 1380 && winw > 1260 ? 8 : winw < 1260 ? 12 : 6,
          auto12: winw > 1600 ? 8 : winw < 1260 ? 24 : 12,
        });
      };
      window.addEventListener('resize', handleResize);
    } else {
      observer = new ResizeObserver(function elResizeChange(entries) {
        // 每次被观测的元素尺寸发生改变这里都会执行
        entries.forEach((entry) => {
          const { width, height } = entry.target.getBoundingClientRect();
          setState({
            width: width,
            height: height,
          });
        });
      });
      observer.observe(targetElement); // 观测DOM元素
    }
    return () => {
      if (observer) {
        observer.disconnect();
      }
      if (handleResize) {
        window.removeEventListener('resize', handleResize);
      }
    };
  }, [target]);

  return {
    ...state,
  };
};

export default useSize;

页面调用

import { useSize } from '@/hooks';

const { span8, span16 } = useSize();
...
<Col span={span8}>***</Col>