React组件完全加载前显示加载页：代码疑问与优化方案

1. 当前代码的useEffect完全达不到目标 #

你写的useEffect是空依赖数组，它只会在**App组件首次渲染完成（包括所有子组件的初始DOM渲染）**后立刻执行setLoading(false)，直接把加载页关掉。但这和你要的“所有组件完全加载完成”根本不是一回事——如果子组件（比如Home、Project）内部有异步操作（比如接口请求、图片/资源加载），这些操作不会被这个useEffect等待，加载页会在子组件还在加载数据/资源的时候就消失，完全起不到作用。

说白了：当前代码只是等App的初始渲染结束，不等子组件的异步加载任务。

2. 不用setTimeout怎么测试？ #

直接给子组件加模拟的异步加载逻辑就行：

• 比如给Home组件加一段模拟接口请求的代码：

  const Home = () => {
    const [data, setData] = useState(null);
    useEffect(() => {
      // 模拟2秒后拿到数据的异步请求
      const fetchData = async () => {
        const res = await new Promise(resolve => setTimeout(resolve, 2000, '模拟数据'));
        setData(res);
      };
      fetchData();
    }, []);
  
    // 数据没加载完时不渲染内容
    if (!data) return null;
    return <div>首页内容</div>;
  };
  

• 之后修改App的逻辑去追踪所有子组件的加载状态，就能直观看到加载页是否会等所有子组件加载完再消失。

3. 更靠谱的实现方式 #

要实现“所有组件完全加载完成前显示加载页”，核心是要追踪所有子组件的加载状态，常见有两种方案：

方案一：集中管理子组件的加载状态 #

在App里维护一个记录所有子组件加载状态的对象，每个子组件加载完成后主动通知App：

// App.js
const App = () => {
  const [loadingStates, setLoadingStates] = useState({
    nav: true,
    home: true,
    about: true,
    tech: true,
    project: true,
    contact: true
  });

  // 检查所有组件是否都加载完成
  const allLoaded = Object.values(loadingStates).every(state => !state);

  // 子组件加载完成后调用这个方法更新状态
  const markLoaded = (key) => {
    setLoadingStates(prev => ({ ...prev, [key]: false }));
  };

  return (
    <Loading loading={!allLoaded}>
      <NavBar onLoaded={() => markLoaded('nav')} />
      <Home onLoaded={() => markLoaded('home')} />
      <About onLoaded={() => markLoaded('about')} />
      <Technology onLoaded={() => markLoaded('tech')} />
      <Project onLoaded={() => markLoaded('project')} />
      <Contact onLoaded={() => markLoaded('contact')} />
    </Loading>
  );
};

// 以Home组件为例，修改后：
const Home = ({ onLoaded }) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const res = await new Promise(resolve => setTimeout(resolve, 2000, '模拟数据'));
      setData(res);
      onLoaded(); // 数据加载完通知App
    };
    fetchData();
  }, [onLoaded]);

  if (!data) return null;
  return <div>首页内容</div>;
};

方案二：用自定义Hook统一处理异步加载 #

如果子组件的加载逻辑都是异步请求，可以封装一个Hook来统一管理加载状态，再在App里汇总：

// 自定义Hook，处理异步加载逻辑
const useAsyncLoad = (asyncFn) => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      const res = await asyncFn();
      setData(res);
      setLoading(false);
    };
    loadData();
  }, [asyncFn]);

  return { loading, data };
};

// Home组件使用这个Hook
const Home = ({ onLoaded }) => {
  const { loading, data } = useAsyncLoad(() => 
    new Promise(resolve => setTimeout(resolve, 2000, '模拟数据'))
  );

  useEffect(() => {
    // 加载完成后通知App
    if (!loading) onLoaded();
  }, [loading, onLoaded]);

  if (loading) return null;
  return <div>首页内容</div>;
};

// App组件逻辑和方案一一致，汇总所有子组件的加载状态

补充：如果要等页面所有静态资源加载完成 #

如果你的“加载完成”还包括页面上的图片、字体等静态资源，可以监听window的load事件：

// App.js
const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const handlePageLoad = () => setLoading(false);
    // 如果页面已经加载完，直接触发
    if (document.readyState === 'complete') {
      handlePageLoad();
    } else {
      window.addEventListener('load', handlePageLoad);
      // 组件卸载时移除监听
      return () => window.removeEventListener('load', handlePageLoad);
    }
  }, []);

  return (
    <Loading loading={loading}>
      {/* 子组件 */}
    </Loading>
  );
};

这种方式会等页面所有静态资源加载完成后再隐藏加载页，但不会等待子组件的异步接口请求。

内容的提问来源于stack exchange，提问作者Sam Levine