使用 useEffect 強制重新渲染

Question

import * as React from "react";
// import "./style.css";

export default function App() {
      let [width, setWidth] = React.useState(window.innerWidth);
      let [height, setHeight] = React.useState(window.innerHeight);

      React.useEffect(() => {
        console.log("useEffect is called");
        window.addEventListener("resize", () => {
        setHeight(window.innerHeight);
        setWidth(window.innerWidth);
        });
      }, []);
 return (
      <div>
         {/* <button onClick={handler}> Submit </button> */}
         <h1>
         {" "}
            {height},{width}{" "}
          </h1>
      </div>
     );
   }

盡管將 useEffect 與空依賴項數組一起使用，但上述代碼會導致在 UI 上重新呈現高度和寬度值(height =windows.innerHeight & width = windows.innerWidth) 。

我在useEffect useState更新height和width 。 我的理解是，如果與空依賴數組一起使用， useEffect執行一次（在初始渲染之后），但在調整屏幕大小時， height和width也會更新，從而導致重新渲染

Answer 1

1. 你應該使用 const 來聲明你的狀態
2. window.addEventListener 僅聲明一次，但每次調整大小都會觸發 - 因此每次調整大小都會更新您的 state
3. 每次您的 state 更改時，組件都會重新呈現

Answer 2

我認為那是因為你在 useEffect 中添加了addEventListener來調整useEffect的大小，所以每當 window 調整大小時它的回調 function 將被調用並且你的狀態將被改變所以你的組件將被重新渲染

Answer 3

useEffect僅被調用一次，但由於您已使用addEventListener在 window object 上添加了一個偵聽器。 只要 window 大小發生變化，處理程序中的代碼（設置狀態）就會被執行。 此 state 更新將導致您的組件重新呈現並更新 UI

Answer 4

window.addEventListener方法只運行一次，然后您就有了一個resize的偵聽器並執行了它的回調。 window.addEventListener在每次調整大小時執行，它的回調會執行，清楚嗎？