反应悬念/延迟延迟？

Question

我正在尝试使用新的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);
});

Answer 1

lazy函数应该返回{ default: ... }对象的承诺，该对象由import()具有默认导出功能的模块返回。setTimeout不会返回承诺，也不能那样使用。尽管任意承诺可以：

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