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中部署了useEffect来更新height和width。我的理解是,如果与空依赖项数组一起使用,useEffect只执行一次(在初始呈现之后),但是在调整屏幕大小时,height和width也会被更新,从而导致重新呈现。
https://stackoverflow.com/questions/74472379
复制相似问题