在useEffect挂钩中使用matchMedia会导致无限渲染

Question

我正在使用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; 
}

Answer 1

此Article引导您完成处理媒体查询更改以及如何将所有内容组合在一起的过程，此外，作者还提供了一些避免性能下降的提示（反应提示）并提出了解决方案