反应悬念/懒惰延迟？

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

原文由 vemund 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Estus Flask 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

正如 loopmode 所提到的，组件回退应该有一个超时时间。

 import React, { useState, useEffect } from 'react'

const DelayedFallback = () => {
  const [show, setShow] = useState(false)
  useEffect(() => {
    let timeout = setTimeout(() => setShow(true), 300)
    return () => {
      clearTimeout(timeout)
    }
  }, [])

  return (
    <>
      {show && <h3>Loading ...</h3>}
    </>
  )
}
export default DelayedFallback

然后只需导入该组件并将其用作后备。

 <Suspense fallback={<DelayedFallback />}>
       <LazyComponent  />
</Suspense>

原文由 Akrom 发布，翻译遵循 CC BY-SA 4.0 许可协议