React项目中实现仅首次启动播放Intro动画的问题求助

我正在开发一个基于React与react-router的项目，需求是Intro动画组件仅在应用首次启动时渲染一次（不包括路由切换或应用内部组件首次渲染的场景）。我尝试了以下几种代码实现方案，但均未达到预期效果，现寻求此类需求的通用实现模式或可行解决方案：

初始尝试代码 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import About from "./pages/About";
import Errorpage from "./pages/Errorpage";
import Homepage from "./pages/Homepage";
import { useState, useEffect } from "react";
import AppIntro from "./components/AppIntro/AppIntro";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <Errorpage />,
    children: [
      {
        index: true,
        element: <Homepage />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
]);

function App() {
const [isStarting, setIsStarting] = useState(false);

useEffect(() => {
setIsStarting(true);
[setIsStarting]);

return isStarting ? (
       <AppIntro setIsStarting={setIsStarting} />
     ) : (
       <RouterProvider router={router} />
     );
   }

export default App;

第二种尝试代码 #

let introAnimationTrigger = true;

function App() {
const [isStarting, setIsStarting] = useState(false);

useEffect(() => {
if (introAnimationTrigger) {
introAnimationTrigger = false;
return;
}
setIsStarting(true);
[setIsStarting]);

return isStarting ? (
     <AppIntro setIsStarting={setIsStarting} />
   ) : (
     <RouterProvider router={router} />
   );
 }

export default App; 

第三种尝试代码 #

let introAnimationTrigger = true;

function App() {
const [isStarting, setIsStarting] = useState(false);

useEffect(() => {
if (introAnimationTrigger) {
setIsStarting(true);
introAnimationTrigger = false;
}

return () => {
if (!introAnimationTrigger) {
setIsStarting(false);
}
};
[setIsStarting]);

return isStarting ? (
     <AppIntro setIsStarting={setIsStarting} />
   ) : (
    <RouterProvider router={router} />
   );
 }

export default App;

可行解决方案 #

要实现仅首次启动显示Intro的需求，核心是持久化记录Intro是否已经显示过，避免组件重新渲染、热更新或页面刷新时状态丢失。以下是基于localStorage的通用实现方案：

实现代码 #

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import About from "./pages/About";
import Errorpage from "./pages/Errorpage";
import Homepage from "./pages/Homepage";
import { useState, useEffect } from "react";
import AppIntro from "./components/AppIntro/AppIntro";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <Errorpage />,
    children: [
      {
        index: true,
        element: <Homepage />,
      },
      {
        path: "/about",
        element: <About />,
      },
    ],
  },
]);

function App() {
  const [showIntro, setShowIntro] = useState(false);

  useEffect(() => {
    // 检查本地存储是否存在已查看Intro的标记
    const hasSeenIntro = localStorage.getItem("hasSeenIntro");
    // 不存在标记则显示Intro
    if (!hasSeenIntro) {
      setShowIntro(true);
    }
  }, []);

  // Intro动画完成后的回调
  const handleIntroFinish = () => {
    setShowIntro(false);
    // 标记已查看Intro，持久化到本地存储
    localStorage.setItem("hasSeenIntro", "true");
  };

  return showIntro ? (
    <AppIntro onFinish={handleIntroFinish} />
  ) : (
    <RouterProvider router={router} />
  );
}

export default App;

方案说明 #

1. 持久化状态：用localStorage存储hasSeenIntro标记，确保页面刷新、组件重新挂载后状态不会丢失
2. 初始化检查：组件挂载时读取本地存储，判断是否需要显示Intro
3. 完成标记：Intro动画结束后调用handleIntroFinish，关闭Intro并写入标记

原方案问题分析 #

• 初始尝试：useEffect依赖项语法错误，且未持久化状态，组件重新渲染时isStarting会被重置，导致Intro重复显示或逻辑混乱
• 第二种尝试：全局变量introAnimationTrigger在热更新、页面刷新时会被重置，无法保证仅首次显示；逻辑顺序错误，会直接跳过Intro显示路由
• 第三种尝试：全局变量同样存在重置问题，且useEffect清理函数会在组件卸载时执行，可能在路由切换等场景错误隐藏路由显示Intro

补充注意点 #

• 开发环境测试时，可通过浏览器控制台执行localStorage.removeItem("hasSeenIntro")清除标记，重新查看Intro
• 移动端项目可替换为AsyncStorage（React Native）或其他持久化存储方案
• 确保AppIntro组件在动画完成后调用传入的onFinish回调

内容的提问来源于stack exchange，提问作者Suryasish Paul