反应加载中的延迟属性有什么问题?

Question

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

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

感谢您的任何帮助。

Answer 1

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

以下是官方文档的摘录：

避免加载组件闪光

有时组件加载速度非常快(<200ms(，并且加载屏幕仅在屏幕上快速闪烁。 许多用户研究已经证明，这会导致用户感知到事情花费的时间比实际时间更长。如果您不显示任何内容，用户会认为它更快。 因此，您的加载组件还将获得一个 pastDelay 属性，该属性仅在组件加载时间超过设定的延迟时为真。

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