骨架屏在React中怎么避免闪屏问题？

皇甫誉琳提问于 2026-03-22 12:38:19 阅读 45

优化

我用React做列表页的骨架屏，数据加载很快时骨架屏一闪而过，体验很差。试过加setTimeout延迟隐藏，但感觉不靠谱。

现在代码是这样：

const [loading, setLoading] = useState(true);
useEffect(() => {
  fetchData().then(() => setLoading(false));
}, []);

return (
  <div>
    {loading ? <SkeletonList /> : <ActualList />}
  </div>
);

有没有更优雅的方式控制骨架屏显示时间，或者判断是否真的需要展示？

我来解答赞 5 收藏

反馈

1 条解答

一柯慧 Lv1

设置一个最小显示时间就行

const [loading, setLoading] = useState(true);

useEffect(() => {

  const timer = setTimeout(() => setLoading(false), 500);

  fetchData().then(() => clearTimeout(timer));

}, []);

2026-03-22 13:03