javascript - react 悬念防止后备旋转器闪烁

Question

我想知道是否有一个好的方法来防止react中回退的闪烁。我正在使用 react 路由器，问题是当一个组件被挂起时，后备加载器会快速闪烁，这非常烦人。我在这里看到了答案React suspense/lazy delay?如下所示:

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

但我的问题是，我有一个具有透明背景的覆盖加载微调器，并且在解决 promise 之前该组件实际上不会加载。这会使页面在没有内容的情况下挂起半秒，实际上比旋转器的闪烁更烦人。

所以我想问题是有没有人找到解决这个问题的好方法。我真的很想在页面中添加类似 nprogress 的东西，但不知道如何使用 React.suspense 来实现它。我可能只需要重新使用 React 可加载，但当 React 具有基本相同的开箱即用功能时，我真的不想这样做。

Answer 1

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

这个想法很简单，只是在一定时间内不显示任何内容，然后显示加载程序。因此，假设大约 300 毫秒内不会显示任何内容，延迟后它应该显示(在本例中)ContentLoader 或您喜欢的任何内容。

在 Typescript 中为 lazy-loader.ts

import { FC, useEffect, useState } from 'react';
import ContentLoader from './content-loader'; // or any spinner component

export interface LazyLoaderProps {
  delay?: number;
}

const LazyLoader: FC<LazyLoaderProps> = ({
  delay = 250,
  ...props
}) => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setShow(true);
    }, delay);
    return () => {
      clearTimeout(timeout);
    };
  }, [delay]);

  return show ? <ContentLoader {...props} /> : null;
};

export { LazyLoader as default };

然后像这样使用

import LazyLoader from "./lazy-loader"
// ...
<Suspense fallback={<LazyLoader delay={300} />}>...</Suspense>

这不会延迟导入。 (我也认为这不是最佳的)让我知道这是否有帮助。