[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>
);
}