Javascript 反应悬念/延迟？

我试图使用新的React Lazy和suspence来创建一个后备加载组件。这很好，但是回退显示的时间只有几毫秒。有没有办法增加额外的延迟或最短时间，以便我可以在渲染下一个组件之前显示该组件的动画

懒惰的导入现在

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

等待组件：

function WaitingComponent(Component) {

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

---

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

---

您应该创建一个本身具有超时和可见状态的回退组件。最初您将visible设置为false。 当安装回退组件时，它应该设置Timeout以打开可见状态标志。 请确保您的组件仍然安装，或者在卸载组件时清除超时。 最后，如果visible state为false，则在回退组件中渲染null（例如，仅块/半透明覆盖，但不渲染微调器/动画）

---

然后使用此类组件，例如作为回退。

正如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

import React，{useState，useffect}来自“React”
const DelayedFallback=（）=>{
const[show，setShow]=useState（false）
useffect（（）=>{
let timeout=setTimeout（（）=>setShow（true），300）
return（）=>{
clearTimeout（超时）
}
}, [])
返回(
{显示并加载…}
)
}
导出默认延迟回退

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

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

---

我遇到了类似的问题，而且我使用的是TypeScript和React。 所以，我也必须尊重typescript编译器&我采用了一种方法，这种方法具有无限的延迟，而且没有来自typescript的抱怨。 承诺永远不会使用

暂挂

和

惰性

@Akrom Sprinter在快速加载时有一个很好的解决方案，因为它隐藏了回退微调器并避免了总体延迟。以下是OP要求的更复杂动画的扩展：

1.简单变体：淡入+延迟显示

const-App=（）=>{
const[isEnabled，setEnabled]=React.useState（false）；
返回(
setEnabled（b=>！b）}>切换组件
{isEnabled&&}
);
};
常量回退=（）=>{
const containerRef=React.useRef（）；
返回(


);
};
/*
技术助手
*/
const Home=React.lazy（（）=>fakeDelay（2000）（导入（“./routes/Home”））；
//import_uu只是堆栈代码段的存根；在实际代码中使用动态导入。
函数导入（路径）{
返回Promise.resolve（{default:（）=>Hello Home！
}）；
}
//添加一些异步延迟以便于说明
函数伪延迟（毫秒）{
回报承诺=>
我保证，那么(
数据=>
新承诺（解决=>{
setTimeout（（）=>解析（数据），ms）；
})
);
}
render（，document.getElementById（“根”））
/*先延迟显示微调器，然后逐渐让其淡入*/
.撤退法{
可见性：隐藏；
动画：fadein 1.5s；
动画填充模式：正向；
动画延迟：0.5s；/*快速加载时无微调器闪烁*/
}
@关键帧淡入淡出{
从{
能见度：可见；
不透明度：0；
}
到{
能见度：可见；
不透明度：1；
}
}
.旋转{
动画：旋转2s无限线性；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（359度）；
}
}

您为什么要这样做？用户希望使用您的内容和应用程序，而不是查看加载微调器。引入lazy and Suspence的全部原因是，作为一名开发人员，您可以通过缩短初始应用程序加载时间和不到处显示加载微调来为用户提供更好的用户体验。你想做的与这个想法相反。@JohannesKlauß你说的是初始加载时间。悬念显然适用于纺纱机和其他负载指示器，用于惰性负载组件。这就是为什么它有
回退
@JohannesKlauß我认为你不理解我的用户体验问题。我的目标不是创建一分钟长的旋转加载程序，我的目标是创建一个更好的加载功能，平滑美观。在用户体验中，为用户提供更好的页面转换是一个日益增长的趋势。@JohannesKlaußSuspence/Lazy的想法也是通过只加载所需的组件来减少捆绑包的大小。在这里，目标不是增加加载时间，而是在路由之间有一个更平滑的过渡。你能解释一下为什么第一个代码不起作用吗？setTimeout将在300密耳后解析承诺。Thanks@AdiAzarya它可以工作，但不能按要求工作。延迟将是加载时间加上额外的300毫秒，而不是加载时间或至少300毫秒。另一种方法可能是使用
Promise.all（[import（…），delayPromise]）
，它并行执行导入和延迟，也更容易理解。不幸的是，这个答案（嗯，它的第一部分）在Typescript上下文中不起作用；幸运的是，在第1部分中，Typescript有一个有效的方法，即引入额外的延迟。您能提供一个示例吗？我们是否可以对悬念组件说，如果呈现并装载回退组件，它必须保持装载状态，例如至少1秒？这没有帮助。不过，回退加载器只出现了很短的一段时间。是否有任何方法可以使其持续更长时间，因为即使在装载机消失后，使用react Route装载组件也需要相当长的时间？
<Suspense fallback={<DelayedFallback />}>
       <LazyComponent  />
</Suspense>