usePageSize

信息

对于页面的分辨率适配，或者对页面尺寸变化有要求时使用

实现

import React, { useState, useEffect } from "react";

const usePageSize = () => {
  // 浏览器的尺寸 默认设置为0；
  const [height, setHeight] = useState(0);
  const [width, setWidth] = useState(0);

  const resizeUpdate = (e) => {
    // 通过事件对象获取浏览器窗口的高度
    let h = e.target.innerHeight;
    let w = e.target.innerWidth;
    setHeight(h);
    setWidth(w);
  };

  useEffect(() => {
    // 页面刚加载完成后获取浏览器窗口的大小
    let h = window.innerHeight;
    let w = window.innerWidth;
    setHeight(h);
    setWidth(w);
    // 页面变化时获取浏览器窗口的大小
    window.addEventListener("resize", resizeUpdate);

    return () => {
      // 组件销毁时移除监听事件
      window.removeEventListener("resize", resizeUpdate);
    };
  }, []);
  return [height, width];
};

使用

const [height, width] = usePageSize();