ReactJS如何实现网站加载屏并隐藏主内容直至动画播放完毕

核心解决思路是将loading状态从Loading子组件提升到父组件App中，这样App可以根据状态值同时控制加载动画和主站内容的显示隐藏。

第一步：修改App.js代码 #

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';
import { useState } from 'react';

function App() {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <div>
      {isLoading && <Loading onFinish={() => setIsLoading(false)} />}
      {!isLoading && (
        <main>
          <Nav/>
          {/* 其余主站内容统一放在此处即可 */}
        </main>
      )}
    </div>
  );
}

export default App;

第二步：修改Loading组件代码 #

import Typical from 'react-typical';
import "./Loading.scss";
import { useEffect } from 'react';

const Loading = ({ onFinish }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onFinish();
    }, 18000);
    // 新增定时器清理逻辑，避免组件异常卸载时的内存泄漏
    return () => clearTimeout(timer);
  }, [onFinish]);

  return (
    <div>
      <h1 id="loading">
        <Typical 
          loop={1} 
          wrapper='p'
          steps={[
            "Hello",
            2000,
            "My name is Leonard.",
            3000,
            "I am an aspiring developer",
            3000,
            "Welcome to my website!",
            3000,
          ]} 
        />
      </h1>
    </div>
  );
};

export default Loading;

可选优化点 #

• 你原代码里Typical组件的oop属性为笔误，修正为loop才能保证动画仅播放一次
• 无需手动计算18秒的总动画时长，可以通过steps数组自动统计，后续调整动画内容时不需要手动修改定时器时间：

// 在Loading组件内定义steps
const steps = [
  "Hello",
  2000,
  "My name is Leonard.",
  3000,
  "I am an aspiring developer",
  3000,
  "Welcome to my website!",
  3000,
];
// 自动累加所有停留时长得到总动画时间
const totalDuration = steps.filter(item => typeof item === 'number').reduce((prev, curr) => prev + curr, 0);
// setTimeout直接使用totalDuration即可
setTimeout(() => onFinish(), totalDuration);

内容的提问来源于stack exchange，提问作者Jean Claude Dusse