javascript - react 悬念/懒惰延迟？

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: ... } 对象的 promise ，该对象由 import() 返回默认导出的模块。 setTimeout 不返回 promise ，不能那样使用。虽然任意 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);
});