反应阿波罗查询太该死了

Question

我有一个反应速度过快的阿波罗查询。 <p>Loading...</p>将在api查询完成之前显示一秒钟，并显示我的结果。有什么方法可以减慢速度或稍微延迟以防止内容闪烁？

Answer 1

在Apollo客户端中看不到任何可让您执行此操作的东西。

我猜您只想在内容太长而无法显示时才显示Loading占位符。除了避免闪烁描述的内容外，还避免了感知性能问题（即，如果存在{{1}，用户更有可能感觉缓慢） }标题，即使需要花费相同的时间）

你能做什么？

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

• 除了从阿波罗加载道具外，还添加一个Loading...状态变量
• 时间过长，仅触发showLoading状态

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

loading

解决方案2

使用更高阶的组件或将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> } } 包裹在render方法中的<Timeout>组件来使其通用，以避免污染状态。

所有您需要的将在渲染方法中：

<p>Loading...</p>