React useMediaQuery钩子

检查当前环境是否与给定的媒体查询匹配，并返回相应的值。

• 检查Window和Window.matchMedia()是否存在。如果不存在（例如SSR环境或不受支持的浏览器），则返回whenFalse。
• 使用Window.matchMedia()来匹配给定的query。将其matches属性转换为布尔值，并使用useState()钩子将其存储在状态变量match中。
• 使用useEffect()钩子添加一个监听器以侦听更改，并在钩子销毁后清除监听器。
• 根据match的值返回whenTrue或whenFalse。

const useMediaQuery = (query, whenTrue, whenFalse) => {
  if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined')
    return whenFalse;

  const mediaQuery = window.matchMedia(query);
  const [match, setMatch] = React.useState(!!mediaQuery.matches);

  React.useEffect(() => {
    const handler = () => setMatch(!!mediaQuery.matches);
    mediaQuery.addListener(handler);
    return () => mediaQuery.removeListener(handler);
  }, []);

  return match ? whenTrue : whenFalse;
};

const ResponsiveText = () => {
  const text = useMediaQuery(
    '(max-width: 400px)',
    '小于400像素宽',
    '大于400像素宽'
  );

  return <span>{text}</span>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <ResponsiveText />
);