1

我正在使用 react-loadable 库在 reactJS 中进行延迟加载。它非常适合渲染组件。但是当我使用延迟属性时，渲染时间不受影响。那么，我需要在这里更新什么？ 

const Home = Loadable({
  loader: () => import('./Home'),
  loading: Loading,
  delay: 5000
});

const Test = Loadable({
  loader: () => import('./Test'),
  loading: Loading,
  delay: 5000
});

return (
  <Router>
    <div className="App">
      <Link to="/"> Home </Link>
      <Link to="/test"> Test </Link>
      <Route exact path="/" component={Home} />
      <Route path='/test' component={Test} />
    </div>
  </Router>
);

感谢您的帮助。

4

1 回答 1

3

延迟不影响实际组件的渲染时间，但会延迟加载组件的渲染时间。

以下是官方文档的摘录：

避免加载组件的 Flash

有时组件加载非常快（<200ms），加载屏幕只是在屏幕上快速闪烁。许多用户研究已经证明，这会导致用户感知事物花费的时间比他们实际拥有的时间要长。如果您不显示任何内容，用户会认为它更快。因此，您的加载组件还将获得一个 pastDelay 道具，该道具仅在该组件的加载时间超过设定的延迟时才会为真。

来源：https ://github.com/jamiebuilds/react-loadable#avoiding-flash-of-loading-component

于 2019-06-07T22:05:18.527 回答