Javascript 反应悬念防止回退旋转器闪动

我想知道是否有一个很好的方法来防止react中的回退闪烁。我使用的是react路由器，问题是当一个组件被挂起时，回退加载器会快速闪烁，这非常烦人。我在这里看到的答案如下：

const Home = lazy(() => {
  return Promise.all([
    import('./components/Home'),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

但我的问题是，我有一个覆盖加载微调器，具有透明的背景，组件在承诺得到解决之前不会实际加载。这使得页面在半秒钟内没有内容，实际上比微调器的闪烁更烦人

所以我想问题是有没有人找到一个好办法来处理这个问题。我真的很想在页面上添加一些像nprogress这样的东西，但我不知道如何使用React.suspence实现这一点。我可能不得不重新使用react-loadable，但我真的不想在react具有基本相同的现成功能时使用它。

import-react，{suspend，lazy}来自“react”；
import React, { Suspense, lazy } from "react";

const Home = lazy(() => {
  return Promise.all([
    import("./home"),
    new Promise(resolve => setTimeout(resolve, 300))
  ]).then(([moduleExports]) => moduleExports);
});

function FullSpinner() {
  return (
    {/**  full spinner jsx goes here */}
    <div className="full-spinner">
      <p>loading....</p>
    </div>
  )
}

function App() {
  return (
    <div className="App">
      <h1>app component</h1>
      <Suspense fallback={<FullSpinner />}>
        <Home />
      </Suspense>
    </div>
  );
}

const Home=懒惰（（）=>{
回报你的承诺([
进口（“/国内”），
新承诺（resolve=>setTimeout（resolve，300））
]).然后（（[moduleExports]）=>moduleExports）；
});
函数FullSpinner（）{
返回(
{/**完整微调器jsx位于此处*/}
加载

)
}
函数App（）{
返回(
应用程序组件
);
}

编辑：

import React，{suspent，lazy，useState，useffect}来自“React”；
const Home=懒惰（（）=>{
回报你的承诺([
进口（“/国内”），
新承诺（resolve=>setTimeout（resolve，500））
]).然后（（[moduleExports]）=>moduleExports）；
});
函数FullSpinner（）{
返回(
加载

);
}
const LazyLoading=（{delay，loader:loader，children}）=>{
const[ready，setReady]=useState（false）；
useffect（（）=>{
setTimeout（（）=>setReady（true），延迟）；
}，[延迟]；
准备好了吗(
{儿童}
) : (
);
};
函数App（）{
返回(
应用程序组件
);
}

我最近遇到了同样的问题，我最终实现了一个组件，用于悬念的

回退

想法很简单，只是在一定时间内不显示任何内容，然后显示加载程序。因此，假设在300ms内不会显示任何内容，在延迟之后，它应该显示（在本例中）ContentLoader或任何您喜欢的内容

在Typescript中作为
lazy loader.ts

从'react'导入{FC，useffect，useState}；
从“./content loader”导入ContentLoader；//或任何微调器组件
导出接口LazyLoaderProps{
延迟？：数字；
}
常数LazyLoader:FC=({
延迟=250，
…道具
}) => {
const[show，setShow]=useState（false）；
useffect（（）=>{
常量超时=设置超时（（）=>{
设置显示（正确）；
}，延误）；
return（）=>{
clearTimeout（超时）；
};
}，[延迟]；
返回显示？：空；
};
导出{LazyLoader作为默认值}；

那就这样用吧

从“/lazy loader”导入LazyLoader
// ...
...

这不会延迟进口。（我也认为这不是最佳选择）
让我知道这是否有用。
这与我在上面发布的代码基本相同。这会有什么帮助呢。也许你不明白这个问题。当组件加载但被挂起时，react显示微调器非常快，然后将其取下。这种快速闪烁，然后通过悬挂移除旋转器，这是我试图避免的。我不需要编写微调器代码的帮助。也许这就是你想要的：加载程序只在加载大于300ms时才会显示。您必须自定义此延迟加载程序以显示所需内容或通用组件。我也遇到了同样的问题。但我使用react snap生成静态版本。如果这是同样的情况，我决定从顶部组件中删除惰性组件，并根据用户视口得到部分闪光。这回答了你的问题吗@KevinAshworth你发布的链接基本上与我的问题中的代码完全相同，如果你阅读了这个问题，我会解决它。问题是页面在超时期间没有任何内容，页面挂起并跳转。因此，不，它不能回答这个问题。
import React, { Suspense, lazy, useState, useEffect } from "react";

const Home = lazy(() => {
  return Promise.all([
    import("./home"),
    new Promise(resolve => setTimeout(resolve, 500))
  ]).then(([moduleExports]) => moduleExports);
});

function FullSpinner() {
  return (
    <div className="full-spinner">
      <p>loading....</p>
    </div>
  );
}

const LazyLoading = ({ delay, loader: Loader, children }) => {
  const [ready, setReady] = useState(false);
  useEffect(() => {
    setTimeout(() => setReady(true), delay);
  }, [delay]);
  return ready ? (
    <Suspense fallback={<Loader />}>{children}</Suspense>
  ) : (
    <Loader />
  );
};

function App() {
  return (
    <div className="App">
      <h1>app component</h1>
      <LazyLoading delay={2000} loader={FullSpinner}>
        <Home />
      </LazyLoading>
    </div>
  );
}