javascript – 反应悬疑/懒惰延迟？

我正在尝试使用新的React Lazy和Suspense来创建一个后备加载组件.这很好用,但后备只显示几毫秒.有没有办法添加额外的延迟或最短时间,所以我可以在渲染下一个组件之前显示此组件的动画？

现在懒惰导入

const Home = lazy(() => import("./home"));
const Products = lazy(() => import("./home/products"));

等待组件：

function WaitingComponent(Component) {

    return props => (
      <Suspense fallback={<Loading />}>
            <Component {...props} />
      </Suspense>
    );
}

我可以这样做吗？

const Home = lazy(() => {
  setTimeout(import("./home"),300);
});

解决方法

延迟函数应该返回{default：…}对象的promise,它由具有默认导出的模块的import()返回. setTimeout不返回promise,也不能像那样使用.任意承诺可以：

const Home = lazy(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(import("./home"),300);
  });
});

如果目标是提供最小延迟,这不是一个好的选择,因为这将导致额外的延迟.

最小延迟是：

const Home = lazy(() => {
  return Promise.all([
    import("./home"),new Promise(resolve => setTimeout(resolve,300))
  ])
  .then(([moduleExports]) => moduleExports);
});