如何在 React.lazy 和 Suspense 中获取加载进度

Posted 2023-02-19

【中文标题】如何在 React.lazy 和 Suspense 中获取加载进度

【英文标题】：How to get loading progress in React.lazy and Suspense

【发布时间】：2019-06-17 17:18:56

【问题描述】：

我正在使用lazy来分割我的路线，我想知道是否有任何方法可以让我在lazy和suspense中获得加载进度。

目前我是这样使用的。

const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() 
  return (
    <Router>
      <Switch>
        <Suspense fallback=<div>loading</div>>
          <Route path="/" exact=true component=Home />
          <Route path="/About" component=About />
        </Suspense>
      </Switch>
    </Router>
  );

---

■ 但我想显示加载进度（如 youtube）。 ■ 有什么方法可以检索进度，例如如下所示。

<Suspense fallback=(progress) => <LoadingBar progress=progress/>>

【问题讨论】：

好问题:)

【参考方案1】：

lazy 使用解析或拒绝的 javascript 承诺，但它们不报告任何进展。

但是，您可以使用 http://ricostacruz.com/nprogress/ 之类的东西来伪造进度，它会随机增加进度条。

【参考方案2】：

这是我的解决方案：

const LazyLoad = () => 
    useEffect(() => 
        NProgress.start();

        return () => 
            NProgress.stop();
        ;
    );

    return '';
;

<Suspense fallback=<LazyLoad />>

【讨论】：

在您的答案中添加一些解释总是有帮助的，以使其更加清晰易懂。请阅读***.com/help/how-to-answer。