时间戳

首页 > 解决方案 > 反应阿波罗查询太快了

reactjs - 反应阿波罗查询太快了

问题描述

我有一个太快的反应阿波罗查询。在 api 查询完成并显示我的结果之前，它<p>Loading...</p>会显示一瞬间。有什么办法可以减慢速度或产生轻微的延迟以防止这种内容闪现？

标签： reactjsreact-apollo

解决方案

我在 Apollo 客户端中没有看到任何可以让您执行此操作的内容。

我想您想要的是Loading仅在内容太长而无法显示时才显示占位符。除了避免您描述的内容闪烁之外，您还避免了感知性能问题（即，如果有标题，即使需要相同的时间，用户也更有可能觉得某些东西很慢）Loading...

你可以做什么？

解决方案 1：使用本地状态

  • showLoading除了从 Apollo 加载 prop 之外，还添加一个状态变量
  • showLoading仅在时间过长时触发状态

代码示例（带有已经loading从 Apollo 接收道具的组件） - 以适应您自己的用例......

const SHOW_LOADING_AFTER = 1000

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      showLoading: false
    }
    this.loadingTimeout = setTimeout(() => {
      this.setState({ showLoading: true })
    }, SHOW_LOADING_AFTER)
  }

  componentWillUnmount() {
    clearTimeout(this.loadingTimeout)
  }

  render() {
    if (this.props.loading) {
      return this.state.showLoading ? <p>Loading...</p> : null
    }
    return <p>Ready!</p>
  }
}

解决方案 2

使用更高阶的组件或<Timeout>包装<p>Loading...</p>在渲染方法中的组件使其通用化以避免污染状态。

您所需要的只是在您的渲染方法中：

if (this.props.loading) {
  <Timeout ms={SHOW_LOADING_AFTER}><p>Loading...</p></Timeout>
}

推荐阅读