显示加载进度条，直到完全下载ReactJS Web应用程序？

Question

我正在使用ReactJS，并且由于SPA应用程序会提供初始index.html，然后使用AJAX调用下载其余的html / javascript / css，是否可以使用这些AJAX调用中的进度事件来创建准确的加载栏？ / p>

有人知道您如何在ReactJS中做到这一点吗？

Answer 1

我过去完成此操作的方式有些硬编码，但可以。本质上，我在状态中有两个变量。其中一个代表loadingProgress，代表整体加载进度。这是用户看到的值。另一个是numOfAjaxCalls。这表示需要进行的ajax调用总数。我在内部使用它来计算loadingProgress。

基本上，我使用ajax的请求进度来确定任何单个ajax调用的状态。在我的xhr.onprogress函数中，通过以下计算更新状态：

const loadingProgress = event.loaded / (event.total * (100 * this.state.numOfAjaxCalls));
this.setState({
    loadingProgress: loadingProgress
});