javascript - 了解 UI 何时在 React/Redux 中准备就绪

Question

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

1. DOM 加载。
2. 初始 React 渲染。
3. 从各种 componentDidMount()s 触发的 HTTP 调用
4. HTTP 调用返回。使用 HTTP 响应更新 Redux 状态。
5. React 使用来自 HTTP 响应的新值呈现。
6. 所有初始加载已完成。用户已准备好与该应用进行交互。

在此过程结束时，我想触发一个跟踪事件来记录 window.performance.now() 的值。

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

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

1. 寻找一个 React 生命周期 Hook ，它会告诉我是否有子项正在更新。类似于 componentOrAnyChildDidUpdate()。我认为这不存在，而且它可能与 React 哲学背道而驰。
2. 通过 context 组合一个 anyChildDidUpdate() 生命周期 Hook ，并使我的应用程序中的每个组件要么子类化为辅助抽象基类，要么包装在高阶组件中.这看起来很糟糕，因为 context 是一个 experimental API .
3. 通过 store.subscribe() 订阅 Redux 状态。更新 Redux 状态以明确记录是否所有 HTTP 调用都已返回。一旦所有 HTTP 调用都返回，并且 React 完成重新渲染，我就知道要触发跟踪回调了。问题是知道 React 何时完成重新渲染。如果我的 store.subscribe() 保证回调在 react-redux 的回调之后同步执行，它就会工作。但事实并非如此。

在 React 中有没有好的方法来做到这一点？

Answer 1

恐怕在 React 中没有通用的好方法来做到这一点，这是与应用程序结构相关的“逻辑”。

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

我的解决方法是:

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

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

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

4) 解决组件 componentDidMount 中的 promise 。

5) 一旦所有的 promise 都得到解决，您就知道“页面”已经准备就绪，您可以记录 window.performance.now() 的值。

很难提供没有大量上下文代码的最小代码示例，因为这些代码分布在整个应用程序中。