基于另一个函数创建react钩子

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖数组确保只在组件挂载和卸载时执行

  return windowSize;
}

export default useWindowSize;

import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    <div>
      当前窗口宽度：{width}px
      <br />
      当前窗口高度：{height}px
    </div>
  );
}

export default MyComponent;