使用 useEffect 强制重新渲染答案

【问题标题】：Forceful Re-render with useEffect使用 useEffect 强制重新渲染
【发布时间】：2022-11-17 17:19:37
【问题描述】：

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>
     );
   }

上面的代码导致在 UI 上重新呈现高度和宽度值（ height =windows.innerHeight & width = windows.innerWidth) 尽管使用 useEffect 和一个空的依赖数组。我在 useEffect 中部署了 useState 来更新高度和宽度。我的理解是，如果与空依赖数组一起使用，useEffect 只会执行一次（在初始渲染之后），但在调整屏幕大小时，高度和宽度也会更新，从而导致重新渲染

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

window.addEventListener 方法只运行一次，然后你有一个 resize 的侦听器，它的回调被执行。 window.addEventListener 不会在每次调整大小时执行，它的回调会执行，清楚吗？

【讨论】：

【解决方案2】：

你应该使用 const 来声明你的状态
window.addEventListener 仅声明一次，但每次调整大小时都会触发 - 因此每次调整大小时都会更新您的状态
每次你的状态改变时组件都会重新渲染

【讨论】：

“你应该使用 const 来声明你的状态”为什么？

【解决方案3】：

useEffect 只被调用一次，但是因为您已经使用 addEventListener 在窗口对象上添加了一个侦听器。只要窗口大小发生变化，处理程序中的代码（设置状态）就会被执行。此状态更新将导致您的组件重新呈现并更新 UI

【讨论】：

【解决方案4】：

我认为那是因为你在useEffect中添加了addEventListener来调整窗口大小，所以每当调整窗口大小时它的回调函数将被调用并且你的状态将被改变所以你的组件将被重新渲染

【讨论】：