React -如何使用媒体查询更改状态

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

const MyComponent = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const mediaQuery = window.matchMedia('(max-width: 768px)');

    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    mediaQuery.addListener(handleMediaQueryChange);
    setIsMobile(mediaQuery.matches);

    return () => {
      mediaQuery.removeListener(handleMediaQueryChange);
    };
  }, []);

  return (
    <div>
      {isMobile ? <p>当前设备是移动设备</p> : <p>当前设备是桌面设备</p>}
    </div>
  );
};

export default MyComponent;