我想知道是否有一个好的方法来防止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 具有基本相同的开箱即用功能时,我真的不想这样做。
最佳答案
我最近遇到了同样的问题,最终我实现了一个用于悬念的后备
的组件。
这个想法很简单,只是在一定时间内不显示任何内容,然后显示加载程序。因此,假设大约 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>
这不会延迟导入。 (我也认为这不是最佳的) 让我知道这是否有帮助。
关于javascript - react 悬念防止后备旋转器闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57404653/