在 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

本文將引導您完成處理媒體查詢更改的過程以及所有部分如何組合在一起，此外，作者還給出了一些如何避免性能損失的提示（React Tips）並提出了解決方案。