javascript - 在 useEffect 挂钩中使用 matchMedia 会导致无限渲染
问题描述
我window.matchMedia
用来检测屏幕尺寸。我想在页面进入小屏幕时重新加载页面。但是,我的代码导致无限渲染。我怎样才能解决这个问题?
export default function App(props) {
const small = useMedia("(max-width: 400px)");
const large = useMedia("(min-width: 800px)");
if(small) {
window.location.reload();
}
return (
<div className="Media">
<h1>Media</h1>
<p>Small? {small ? 'Yes' : 'No'}.</p>
<p>Large? {large ? 'Yes' : 'No'}.</p>
</div>
);
}
function useMedia(query) {
const [matches, setMatches] = useState(
window.matchMedia(query).matches
);
useEffect(() => {
const media = window.matchMedia(query);
if (media.matches !== matches) {
setMatches(media.matches);
}
const listener = () => setMatches(media.matches);
media.addListener(listener);
return () => media.removeListener(listener);
}, [query]);
return matches;
}
解决方案
本文将引导您完成处理媒体查询更改的过程以及所有部分如何组合在一起,此外,作者还给出了一些如何避免性能损失的提示(React Tips)并提出了解决方案。
推荐阅读
- flutter - 我可以使用 flutter_bloc 来管理颤振包中的状态吗?
- python - 将数组中的所有值替换为其枚举的对应项 Numpy
- php - Xampp 不渲染 php 和 html
- c++ - 这个 Leetcode 答案中自定义 BitSet 实现的目的
- identityserver4 - IdentityServer4 的多个配置数据库
- docker - WhatsApp Business API - 如何使用 Postman 访问 wacore 容器以检查健康状况
- c - 警告 整数运算结果超出范围
- c - 将时钟时间(现实世界时间)转换为 jiffies,反之亦然
- vue.js - vue-select v-model reduce 不工作 / Nuxt js Vue js
- html - 如何对齐冒号字符和文本?