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

EN

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

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

我解决这个问题的方法是：

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

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

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

4)解析组件componentDidMount中的promise。

5)一旦所有的承诺都解决了，你就知道“页面”已经准备好了，你可以记录window.performance.now()的值了。

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

有不止一种方法可以做到你所要求的--但在我的脑海中，我会这样做：

·在我创建redux存储并将值添加到初始状态之前，创建一个perf reducer并调用performance.now()。

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

·在已加载的reducer中跟踪初始HTTP请求的加载状态。

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

·将顶层组件连接到加载的reducer，并检查componentDidUpdate中的所有请求是否都已完成。如果为真，则将end值添加到perf reducer。

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);

在我们的项目中，我们使用redux和几个动作-触发器，请求，成功，错误。

"Trigger“调用request并抛出loading: true到我们的”智能“组件"Request”中获取数据并将它们抛入成功/错误"Success“中，告诉我们一切正常且数据已加载并抛出{ loading: false，data }

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

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