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

【问题标题】：Using matchMedia in a useEffect hook is causing infinite renders在 useEffect 挂钩中使用 matchMedia 会导致无限渲染
【发布时间】：2020-07-25 10:19:21
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-hooks matchmedia

【解决方案1】：

这个Article 将带您了解处理媒体查询更改的过程以及所有部分如何组合在一起，此外，作者还给出了一些如何避免性能损失的提示（React Tips）并提出了解决方案。

【讨论】：