屏幕尺寸改变时触发useEffect

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

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

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

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <h1>Window Size</h1>
      <p>Width: {windowSize.width}</p>
      <p>Height: {windowSize.height}</p>
    </div>
  );
}

export default App;

useEffect(() => {
  // 副作用操作
}, [dependency]);

useEffect(() => {
  const handleResize = () => {
    // 处理 resize 事件
  };

  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []);