20.useMediaQuery

文章预览

在现代 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);   ………………………………