如何在应用加载时显示启动屏图片5秒？

你的问题出在直接在组件函数体内调用setTimeout——组件每次渲染（包括状态更新后）都会重新执行整个函数，这意味着每次都会新建一个定时器，不仅可能导致启动屏提前消失，还会造成内存泄漏。

正确的做法是用useEffect钩子包裹定时器逻辑，确保只在组件挂载时设置一次定时器，同时在组件卸载时清理定时器：

import OpeningScreen from '../../../../../../assets/images/OPENING_SCREEN.png';
import { useState, useEffect } from 'react'; // 别忘了导入useEffect

function ProgressComponent() {
  const [isOpeningScreenVisible, setOpeningScreenVisible] = useState(true);

  useEffect(() => {
    // 设置5秒后隐藏启动屏的定时器
    const timer = setTimeout(() => {
      setOpeningScreenVisible(false);
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []); // 空依赖数组确保这个effect只在组件挂载时执行一次

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width: '100%',
        height: '100%',
      }}
    >
      {isOpeningScreenVisible && <img src={OpeningScreen} className="image" />}
    </div>
  );
}

export default ProgressComponent;

关键说明： #

• useEffect的空依赖数组[]：告诉React这个副作用只在组件首次挂载时执行，不会随状态或props更新重复执行，避免重复创建定时器。
• 清理函数return () => clearTimeout(timer)：当组件被卸载（比如用户跳转页面）时，会清除未执行的定时器，防止不必要的状态更新和内存泄漏。

如果你的启动屏需要等待应用资源完全加载（比如所有图片、接口数据），而不是单纯的5秒延迟，还可以结合useEffect监听资源加载状态，再触发隐藏逻辑。

内容的提问来源于stack exchange，提问作者Ilan Edri