我正在尝试使用新的 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);
});
lazy函数应该返回一个{ default: ... }对象的Promise，该对象由import()具有默认导出的module返回。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);
});
正如 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>
Suspense和lazy@Akrom Sprinter 在快速加载时间的情况下有一个很好的解决方案，因为它隐藏了后备微调器并避免了整体延迟。这是 OP 请求的更复杂动画的扩展：
您只需添加一些@keyframes动画Fallback组成部分，无论是延迟其显示setTimeout和状态标志，或纯CSS（animation-fill-mode和-delay这里使用）。
这是可能的，但需要一个包装器。我们没有一个直接的API Suspense，以等待淡出动画，前Fallback组件被卸载。
让我们创建一个自定义useSuspenseAnimationHook，将给予的Promise延迟React.lazy足够长的时间，以便我们的结束动画完全可见：
// inside useSuspenseAnimation
const DeferredHomeComp = React.lazy(() => Promise.all([
import("./routes/Home"),
deferred.promise // resolve this promise, when Fallback animation is complete
]).then(([imp]) => imp)
)
1.) useSuspenseAnimationHook 返回三个值：
hasImportFinished( boolean) → if true,Fallback可以开始淡出动画enableComponent（回调）→Fallback在动画完成后调用它卸载。DeferredComponent → 动态加载的扩展惰性组件 import2.) 监听animationendDOM 事件，以便我们知道动画何时结束。
您应该创建一个回退组件，它本身具有超时和可见状态。最初您设置了visible false。当回退组件被挂载时，它应该 setTimeout 来打开可见状态标志。确保您的组件仍处于挂载状态，或者在卸载组件时清除超时。最后，如果可见状态为 false，则在您的后备组件中渲染 null（或者例如只是阻塞/半透明覆盖但没有微调器/动画）
然后使用这样的组件，例如 <Loading overlay/>，作为后备。
此外，我在使用 TypeScript 和 React 时遇到了类似的问题。所以，我也必须尊重typescript编译器，我继续采用一种具有无限延迟的方法，而且typescript也没有抱怨。从未解决的Promise😆
const LazyRoute = lazy(() => {
return new Promise(resolve => () =>
import(
'../../abc'
).then(x => x e => null as never),
);
});