Javascript 知道用户界面何时在React/Redux中准备就绪

我想知道我的应用程序需要多长时间才能“准备好”让用户与之交互。应用程序加载的时间线包括以下内容：

DOM加载

初始反应渲染

从各种

组件didmount（）触发的HTTP调用

HTTP调用返回。Redux状态使用HTTP响应更新

使用HTTP响应中的新值进行React呈现

所有初始加载均已完成。用户已准备好与应用程序交互

在这个过程结束时，我想触发一个跟踪事件来记录

window.performance.now（）的值

我不知道最好的方法是什么。React的组件系统很好地解耦了UI的各个部分。在这种情况下，不幸的是，这意味着我没有一个容易检查的地方来了解“是否所有内容都用新数据呈现”

我尝试过或考虑过的事情：

寻找一个React生命周期钩子，它告诉我是否有孩子正在更新。类似于
componentoranychilddiddupdate（）
。我认为这是不存在的，这可能与React哲学背道而驰
通过
context
将
anyChildDidUpdate（）
生命周期钩子组合在一起，并使我的应用程序中的每个组件要么子类化为helper抽象基类，要么封装在更高阶的组件中。这看起来很糟糕，因为
上下文
是一个
通过
store.Subscribe（）
订阅Redux状态。更新Redux状态，以明确记录是否已返回所有HTTP调用。一旦所有HTTP调用都返回，并且React完成了重新呈现，那么我就知道启动跟踪回调。问题在于知道React何时完成重新渲染。如果我的
store.subscribe（）
回调保证在
react redux
的回调之后同步执行，那么它就可以工作了。但事实并非如此
在React中有没有一个好的方法可以做到这一点
 在我们的项目中，我们使用redux和一些操作——触发器、请求、成功、错误

“触发器”调用请求并将加载：true放入我们的“智能”组件中
“请求”获取数据并将其放入成功/错误状态
“Success”告诉我们一切正常，加载数据并抛出{loading:false，data}

在成功/错误时，我们始终知道应用程序正在发生这种情况

当然，您可以使用componentWillReceiveProps（nextrops）{}并检查组件中的加载标志和数据
您可以尝试使用
react addons perf

这就是我通常对应用程序进行基准测试的方式：

基本上，您希望在组件开始更新时开始测量，并在生命周期方法
componentdiddupdate（）
之后停止测量

这样，您将跟踪组件初始渲染+组件更新

希望它有助于实现这一目标的两个步骤

通过操作跟踪所有HTTP请求

在redux状态下的简单计数器就足够了，在请求开始时递增，在成功或失败时递减（都通过适当的操作）。
没有
窗口。脏。东西
在丹·阿布拉莫夫面前

跟踪所有
连接
ed组件

componentdiddupdate
方法表示所有子级都已完成渲染。这可以通过
重新组合
的
生命周期
HOC来实现，而无需太多样板文件。如果使用
recompose
s
shoulldupdate
或
reselect
已开始跟踪重新渲染，则开始跟踪重新渲染的正确位置可能是
sCU
方法，或仅是
cWRP
，因为我们不会跟踪未更新的组件

请注意，所有这些都假设是惯用的react/redux应用程序，没有棘手的副作用或动画。例如，如果层次结构深处的某个子组件触发其自己的AJAX请求，比如在
cDM
上，而不是通过redux操作。这样，您也必须跟踪它们，但没有人能够确定它们是否暗示任何重新渲染。
跟踪这样的行为仍然是可能的，只是可能需要更多的努力。
恐怕在React中没有一个通用的好方法来做到这一点，这是与应用程序结构相关的“逻辑”

我想在用react编写的单页应用程序（SPA）中从一个页面导航到另一个页面时显示加载程序，但我遇到了一个类似的问题，即不知道何时停止显示加载程序，以及新页面中的所有组件是否已完成API调用/呈现

我的解决方法是：

1） 我从组件内部删除了所有API调用

2） 创建一个页面组件来包装该页面中包含的所有组件（由react路由器调用）

3） 在导航中同时执行组件所需的所有请求（在我的示例中，显示加载程序时）。对于完成的每个请求，创建一个承诺，并在其中使用React.createElement动态创建组件。将请求-响应和承诺处理程序作为道具传递给创建的组件

4） 解决组件的
componentDidMount
中的承诺

5） 一旦所有承诺都得到解决，您就知道“页面”已经准备好，您可以记录
window.performance.now（）的值

如果没有大量上下文之外的代码，很难提供一个最小的代码示例，因为这些代码分布在整个应用程序中。
有多种方法可以满足您的要求，但我会立即执行以下操作：

•创建一个perf reducer并调用
performance.now（）
，然后再进行redux存储并将值添加到初始状态

{ perf: { start: '...', end: '...' } }

•跟踪已加载还原程序中初始HTTP请求的加载状态

{ loaded: { request1: false, request2: false, request3: false } }

•将顶层组件连接至负载减速器，并检查是否满足所有要求
{ loaded: { request1: false, request2: false, request3: false } }

import React from 'react';
import { connect } from 'react-redux';

class App extends React.Component {
  componentDidUpdate(prevProps) {
    if (!prevProps.loadingComplete && this.props.loadingComplete) {
      this.props.updatePerf(performance.now());
    }
  }
}

const mapStateToProps = state => ({
  loadingComplete: state.loaded.every(item => item),
});

const mapDispatchToProps = dispatch => ({
  updatePerf(time) {
    dispatch({ type: 'SET_ENDING_PERF', payload: time });
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(App);