在现代 Web 开发中，响应式设计是一个关键概念，它允许应用根据不同的屏幕尺寸和设备特性调整其布局和行为。useMediaQuery 钩子提供了一种声明式的方法来在 React 组件中使用媒体查询，使得响应式逻辑的实现变得简单而直观。这个自定义钩子不仅简化了媒体查询的使用，还能够实时响应视口变化。以下是如何实现和使用这个自定义钩子：
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)',
'Less than 400px wide',
'More than 400px wide'
);
return <span>{text}</span>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<ResponsiveText />
);
这个技巧的关键点包括：
检查 window和window.matchMedia是否可用，以兼容服务器端渲染环境。使用 window.matchMedia()创建媒体查询对象。使用 useState存储媒体查询的匹配状态。使用 useEffect添加媒体查询监听器，并在组件卸载时移除监听器。
使用这个钩子时，需要注意以下几点：
提供了三个参数：媒体查询字符串、匹配时的值和不匹配时的值。 在服务器端渲染环境中，总是返回 whenFalse值。实时响应视口变化，自动更新组件状态。
扩展应用：
创建响应式布局组件：
