react实现骨架屏

实现骨架屏的常见方法

在React中实现骨架屏（Skeleton Screen）通常有以下几种方式，每种方法适用于不同场景：

使用CSS纯样式实现

通过CSS直接模拟骨架屏的灰色占位块，适合简单布局：

// Skeleton组件
const Skeleton = () => (
  <div className="skeleton">
    <div className="skeleton-header" />
    <div className="skeleton-body" />
  </div>
);

// CSS样式
.skeleton {
  background: #fff;
  padding: 20px;
}
.skeleton-header {
  height: 30px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-body {
  height: 100px;
  background: #eee;
}

使用第三方库

流行库如react-loading-skeleton提供现成方案：

npm install react-loading-skeleton

import Skeleton from 'react-loading-skeleton';

const UserProfile = ({ isLoading, user }) => (
  isLoading ? (
    <Skeleton height={50} width={200} />
  ) : (
    <h1>{user.name}</h1>
  )
);

动态内容匹配

根据实际DOM结构生成对应的骨架屏：

const ArticleSkeleton = () => (
  <div className="article-skeleton">
    {[...Array(3)].map((_, i) => (
      <div key={i} className="skeleton-paragraph" />
    ))}
  </div>
);

动画效果增强

添加脉冲动画提升用户体验：

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.skeleton-item {
  animation: pulse 1.5s ease-in-out infinite;
}

结合Suspense的现代方案

React 18+推荐与Suspense配合使用：

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

最佳实践建议

1. 保持结构一致：骨架屏应与实际内容布局完全匹配
2. 适度动画：避免过度设计影响性能
3. 响应式设计：确保在不同屏幕尺寸下正常显示
4. 渐进加载：复杂页面可分区块逐步替换骨架屏

通过以上方法可以显著改善用户感知的加载性能，特别是在网络条件较差的情况下。实际选择时应根据项目复杂度决定使用纯CSS方案还是现成库。