知道在React/Redux中UI何时就绪

Question

我想知道我的应用程序需要多长时间才能让用户"准备好"与之交互.应用加载的时间表包括以下内容:

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

在这个过程结束时,我想发一个跟踪事件来记录它的值window.performance.now().

我不确定最好的办法是什么.React的组件系统很好地解耦了UI的各个部分.在这种情况下,不幸的是,它意味着我不会有一个容易检查的地方"知道所有内容都是用新数据渲染的".

我尝试或考虑过的事情:

1. 寻找一个React生命周期钩子,告诉我是否有任何孩子正在更新.有点像componentOrAnyChildDidUpdate().我不认为这存在,它可能与React哲学背道而驰.
2. 将anyChildDidUpdate()生命周期钩子并入context并将我的应用程序中的每个组件都作为辅助抽象基类的子类或者包含在更高阶的组件中.这似乎很糟糕,因为它context是一个实验性API.
3. 通过订阅Redux州store.subscribe().更新Redux状态以显示是否已返回所有HTTP调用.一旦所有的HTTP调用都返回,并且React完成了重新渲染,那么我就知道要触发跟踪回调.问题是知道React何时完成重新渲染.如果我store.subscribe()的回调保证在回调后同步执行,它将起作用react-redux.但事实并非如此.

在React中有一个很好的方法吗？

Answer 1

在我们的项目中，我们使用 redux 和一些操作 - 触发、请求、成功、错误。

“触发器”调用 request 并将 load: true 放入我们的“智能”组件中 “请求”获取数据并将其放入成功/错误中 “成功”告诉我们一切都很好并且数据已加载并抛出 {loading: false, data }

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

当然，您可以使用 componentWillReceiveProps(nextProps) {} 并检查组件中的加载标志和数据