Question

我试图找到在React（create-react-app）/ Redux中完成我的网站加载条的最佳方式，它显示了页面加载的百分比。

但是我只希望在初始页面加载期间出现一次，并且每次后续的ajax调用或页面转换都不应该是加载栏。我目前正在使用Pace.js，而我这样做的方法就是在构建之外包含Pace脚本/样式表。然后我在index.html中执行内联脚本

Pace.once('done', () => remove specific pace stylesheet

然而，问题在于，由于此代码存在于React包代码之外，因此我无法使用Redux和状态管理。我想在Redux中基本上将初始状态键initialPageLoad设置为true，因此根据用户启动的路径，我将从加载器栏中进行不同的转换。在此转换之后，我将initialPageLoad设置为false，以便加载程序不会在后续导航中运行。

我能想到的一个解决方案是将Pace导入React然后我可以访问Redux。但是，我认为将Pace纳入React的生命周期钩子会很棘手;在Create React App repo中，他们甚至为Pace here提供了旁注，建议将其作为单独的CDN包含在内。

我在那里找不到任何类似Pace的React库;唯一的进度加载器只是您需要自行修改的组件，因此任何建议都会受到赞赏。

Answer 1

尝试将Pace集成到Redux状态管理中是不切实际的，因为尝试让应用程序报告是否已加载其资产是一个与应用程序的实例分开的问题。

您可以采取的一种方法是将应用程序初始页面加载标记存储在HTML5 session storage。

然后，当您第一次加载页面时，您可以将会话变量更新为true，例如

Pace.once('done', () => { sessionStorage.setItem('isInitialPageLoaded', true); })

在后续页面加载中，您可以检查此变量以查看此页面是否先前已加载其资源：

 const isInitialPageLoaded = 'isInitialPageLoaded'
 Pace.once('restart', () => { if (sessionStorage.getItem(isInitialPageLoaded)) {
  // Trigger Pace to display page load progress
  sessionStorage.setItem(isInitialPageLoaded, true);
 });

React / Redux应用程序的加载条的百分比，如Pace.js，仅显示在初始页面加载时

1 个答案: