当窗口变量在react中发生变化时如何更新状态

import React, { useState } from 'react';

const [windowSize, setWindowSize] = useState(window.innerWidth);

useEffect(() => {
  const handleResize = () => {
    setWindowSize(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);

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

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

const MyComponent = () => {
  const [windowSize, setWindowSize] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowSize(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

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

  return (
    <div>
      Window Size: {windowSize}px
    </div>
  );
};

export default MyComponent;