阻止 componentDidMount 获取数据（如果服务器端已经可用）答案

【问题标题】：Prevent componentDidMount from fetching data if already available from server-side阻止 componentDidMount 获取数据（如果服务器端已经可用）
【发布时间】：2017-10-30 12:46:28
【问题描述】：

ComponentDidMount() 在组件被挂载时触发，包括在服务器端渲染后水合时。

我在网上找到的一个解决方案是检查我们是否有状态中的数据；但是，这需要在每个组件上包含大量代码。还有什么其他解决方案？

  componentDidMount() {
    // if rendered initially, we already have data from the server
    // but when navigated to in the client, we need to fetch
    if (!this.state.data) {
      this.constructor.fetchData(this.props.match).then(data => {
        this.setState({ data })
      })
    }
  }

【问题讨论】：

我认为没有其他解决方案。作为替代方案，您可以检查 redux-saga 及其选择器

标签： javascript reactjs redux react-redux

【解决方案1】：

我找到了替代解决方案。在我的 Redux 商店中，我保留了当前页面的 URL。因此，在导航时，我可以执行以下操作：

componentDidMount() {
  const { url, match } = this.props;
  if (url !== match.url) {
    fetchData(match.path);
  }
}

【讨论】：

即使数据已经可用，这不会进行 api 调用吗？
这将从服务器进行 api 调用（不包括代码），然后在第一次加载时不会因为上述条件为假。当导航到另一个页面时，上述条件变为真并获取数据。
演示项目（WIP）：github.com/IncredibleWeb/React-PWA-Boilerplate
一个更深刻的解决方案是获取数据并将其存储在redux中，这样您就可以减少api调用并减少服务器负载。
这就是我正在做的。但我需要他在导航上重新获取内容以防止它成为赌注。例如，想象一个新闻文章容器。

【解决方案2】：

只在存储中使用一个布尔变量，我只使用一个叫做“完成”的变量，当服务器获取数据时它设置变量为真，在组件中的组件中检查变量是否为真，如果是，然后不要获取数据，如下所示：

componentDidMount() {
  if(!this.props.done)
    this.props.fetchData();
}

【讨论】：

如果在不同的场景中使用相同的组件并且期望检索不同的数据，那么布尔值done 是不够的，这就是我使用 URL 的原因，因为检索的数据取决于网址。
我没有遇到这种情况，所以我相信你:)