[React]简易封装useMedia：响应式媒体查询hook

[React]简易封装useMedia：响应式媒体查询hook

window.matchMedia

原理：

window.matchMedia 方法可以用来检测当前浏览器窗口是否匹配指定的媒体查询。它接受一个媒体查询字符串作为参数，返回一个 MediaQueryList 对象。

MediaQueryList 对象有以下属性和方法：

• matches：一个布尔值，表示当前窗口是否匹配该媒体查询。
• media：一个字符串，表示该媒体查询的字符串。
• addListener(listener)：添加一个事件监听器，当窗口匹配状态发生变化时会触发该监听器。
• removeListener(listener)：移除一个事件监听器。

以下是一个使用 window.matchMedia 的示例：

const mediaQuery = window.matchMedia('(max-width: 600px)');

if (mediaQuery.matches) {
  // 当前窗口宽度小于等于 600px
} else {
  // 当前窗口宽度大于 600px
}

const handleMatchChange = event => {
  if (event.matches) {
    // 当前窗口宽度小于等于 600px
  } else {
    // 当前窗口宽度大于 600px
  }
};

mediaQuery.addEventListener('change', handleMatchChange);

useMedia实现

import { useState, useEffect } from 'react';

function useMedia(query, initialValue = false) {
  const [matches, setMatches] = useState(initialValue);

  useEffect(() => {
    const mediaQuery = window.matchMedia(query);
    setMatches(mediaQuery.matches);

    const handleMatchChange = event => {
      setMatches(event.matches);
    };

    mediaQuery.addEventListener('change', handleMatchChange);
    return () => mediaQuery.removeEventListener('change', handleMatchChange);
  }, [query]);

  return matches;
}

使用

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

function Example() {
  const isSmallScreen = useMedia('(max-height: 800px)', true);

  return (
    <div>
      {isSmallScreen ? (
        <div style={{ margin: 20 }}>Small Screen</div>
      ) : (
        <div style={{ margin: 50 }}>Big Screen</div>
      )}
    </div>
  );
}