--- theme: simplicity-green --- 监听屏幕宽度，我们项目组之前通常解决方法是window\.onresize方法。 ```javascript const callback = (e)=>{ console.log('screen width has changed',e.target.window.innerWidth); } window.addEventListener('resize',callback); ``` # window\.matchMedia 这里介绍一个新的监听屏幕宽度的方法，性能更高 ```javascript const mediaQuery = window.matchMedia("(min-width: 720px)"); console.log("is large 720px: ", mediaQuery.matches); ``` 直接使用`matchMedia`的API，就可以判断当前的屏幕宽度是否大于`720px`。传入的参数和css媒体查询一致，也就意味着`matchMedia`不仅仅可以查询屏幕宽度，屏幕是否倾斜，屏幕的像素，还有屏幕是否支持指针等等
仅仅判断当前屏幕尺寸还是不够的，我们还需要知道屏幕尺寸什么变化
为此，`matchMedia`提供了增加屏幕监听函数的功能 ```javascript const listener = (mediaQuery)=>{ console.log("is large 720px: ", mediaQuery.matches); } mediaQuery.addListener(listener); ``` 效果：
![2023-08-14 15.17.18.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3acd2ca503214df69589c345fd6be377~tplv-k3u1fbpfcp-zoom-1.image)
可以看到只有屏幕尺寸变化到720px前后，监听事件才会触发，性能嘎嘎好
在项目中，当前组件卸载后，还可以将该监听事件卸载 ```javascript mediaQuery.removeListener(listener); ``` 好，使用方法就这些，很简单，就两个API：`addListener`，`removeListener` # 编写hook 设计思路：调用者传入监听的断点，然后hook返回布尔值，并且当屏幕变化至断点前后，布尔值的变化也会反应出来 ```javascript //useMediaQuery.tsx import {useEffect, useState} from 'react'; const breakPoints = { mobile: "(min-width: 480px)", ipad: "(min-width: 720px)", pc: "(min-width: 1080px)" } const useMediaQuery = (breakPointName: string)=>{ const [matches, setMatches] = useState(false); useEffect(()=>{ //if the breakPoint is error, then do nothing if(!breakPoints[breakPointName]) return; const breakPoint = breakPoints[breakPointName]; const mediaQuery = window.matchMedia(breakPoint); setMatches(mediaQuery.matches); const handler = (e: any)=> setMatches(e.matches); mediaQuery.addListener(handler); return ()=>{ mediaQuer.removeListener(handler); } },[]); return matches; } ``` 代码很简单，传入断点，返回对这个断点的媒体查询。并且会在组件卸载的时候，对监听事件的移除
用法： ```javascript const isIpad = useMediaQuery('ipad'); console.log('isIpad: ',isIpad); ``` 如果需要同时监听多个断点，就需要调用多次useMediaQuery，像这样 ```javascript const isIpad = useMediaQuery('ipad'); const isMobile = useMediaQuery('mobile'); const isPC = useMediaQuery('pc'); ``` 这样需求很常见，需要对不同尺寸屏幕做不同的适应 ### 改进下面对这个hook做些改进，同时可以监听多个媒体查询 ```javascript type keyBreakPoints = keyof typeof breakPoints; const useMultipleMediaQuery = (breakPointNames: keyBreakPoints[]): Record=>{ const [matches, setMatches] = useState(breakPointNames.reduce((res, nextItem)=>{ res[nextItem] = false; return res; },{})); const setBreakPointsMatchs = (breakPointName: keyBreakPoints, isMatch: boolean)=>{ matches[breakPointName] = isMatch; setMatches({...matches}); } useEffect(()=>{ try{ const unSubScribes = breakPointNames.reduce((res, breakPointName)=>{ const breakPoint = breakPoints[breakPointName]; const mediaQuery = window.matchMedia(breakPoint); setBreakPointsMatchs(breakPointName, mediaQuery.matches); const handler = (e: any)=> setBreakPointsMatchs(breakPointName, mediaQuery.matches); mediaQuery.addListener(handler); res.push(()=>medaiQuery.removeListener(handler)); return res; },[]); return ()=>{ unSubScribes.forEach(callback=>{ callback && callback(); }) } }catch{ return; } },[]) return matches; } ``` `useMultipleMediaQuery`支持了同时对多个断点进行媒体查询，通过传入一个断点的数组，并且返回的是一个Record\类型的对象, 并且也会在组件卸载的时候，对所有的监听事件移除
用法： ```javascript const { mobile, ipad, pc } = useMultipleMediaQuery(["mobile","ipad","pc"]); console.log("is mobile: ", mobile); console.log("is ipad: ", ipad); console.log("is pc: ", pc); ``` # 总结：这篇文文章介绍了matchMedia的用法，以及使用这个用法写了一个监听屏幕宽度的react hook，代码都是测试过的，可以直接拿来用。
觉得有收获的小盆友可以点个赞哦✌️