React中如何通过setTimeout实现指定组件的延迟渲染

问题原因 #

• 你直接在JSX中调用setTimeout时，它返回的是定时器的数字ID，并不会渲染回调函数里的组件内容
• 你的setTimeout回调里先写了return;，直接终止了函数执行，后面的JSX永远不会被返回
• React只有通过状态变更才能触发重新渲染，你没有用状态标记是否到了渲染时间，组件不会自动更新视图

修复方案 #

通过React状态控制组件的显示时机，在副作用钩子中启动定时器修改状态即可，完整修复代码如下：

import { useState, useEffect } from 'react';

function App() {
  // 定义状态标记是否需要显示首页内容
  const [showHomeContent, setShowHomeContent] = useState(false);

  useEffect(() => {
    // 开启定时器，1200ms后修改状态触发重渲染
    const timer = setTimeout(() => {
      setShowHomeContent(true);
    }, 1200);
    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, []);

  return (
    <Router>
      <GlobalStyle />

      <SearchProvider>
        <Header />

        <Switch>
          <Route exact path="/">
            {/* 根据状态判断是否渲染目标组件 */}
            {showHomeContent && (
              <>
                <InitialLoad />
                <Home />
              </>
            )}
            {/* 此处可自定义1200ms等待期间显示的占位内容，比如加载动画 */}
          </Route>

          <Route exact path="/series">
            <Series />
          </Route>
          <Route exact path="/movies">
            <MoviesPage />
          </Route>
          <Route exact path="/popular">
            <PopularPage />
          </Route>
          <Route exact path="/resultado-de-busca">
            <SearchPage />
          </Route>
        </Switch>
      </SearchProvider>
    </Router>
  );
}

如果需要每次切换回/路径都重新执行1200ms的延迟逻辑，可以获取当前路由匹配状态，将匹配结果作为依赖项传入useEffect即可。

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