React中未调用setHeight，为何刷新后height会随屏幕尺寸更新？

你看到的现象是因为useState的初始值仅在组件首次渲染时赋值一次。当你刷新页面时，整个组件会重新初始化，此时window.innerHeight会读取当前屏幕的高度，所以height会显示新的数值。但如果不刷新页面，只是调整窗口大小，height不会自动更新——因为你没有监听窗口的resize事件去调用setHeight更新状态。

你的原代码：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [height, setHeight] = useState(window.innerHeight);

  return (
    <div className="App">
      <h1>{height}</h1>
    </div>
  );
}

要实现窗口大小变化时自动更新height，需要添加resize事件监听，用useEffect处理监听的添加与移除：

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [height, setHeight] = useState(window.innerHeight);

  useEffect(() => {
    // 定义更新高度的函数
    const updateHeight = () => {
      setHeight(window.innerHeight);
    };
    // 监听窗口resize事件
    window.addEventListener("resize", updateHeight);
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener("resize", updateHeight);
    };
  }, []);

  return (
    <div className="App">
      <h1>{height}</h1>
    </div>
  );
}

这段代码的逻辑：

• useEffect的空数组依赖确保监听只在组件挂载时添加一次
• 窗口大小变化时，updateHeight函数会触发setHeight更新状态，组件随之重新渲染显示新的高度
• 返回的清理函数会在组件卸载时移除事件监听，防止不必要的内存占用

内容的提问来源于stack exchange，提问作者Chandra Mohan Srivastava