React 实现骨架屏组件

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。如何页面数据没有加载完毕，会展示空白，骨架屏的主要作用的替代白屏，展示页面的大致结构，直到页面数据完全返回。

何时使用

• 首次加载数据时，可能出现白屏，可以使用骨架屏替代白屏展示；

• 数据量较大的列表中，每次数据返回前，可以使用骨架屏做临时展示；

• 某些授权中间页，一般授权中间页并没有内容，所以会出现短暂的空白，可以使用骨架屏替代空白页展示；

以上几种情况会造成页面空白，使用骨架屏代替展示，可以提升用户体验，视觉上是可以看到页面有内容的，且内容铺满了屏幕。

引自：juejin.cn/post/700360…

思路其实就是：当数据未返回的时候，渲染骨架屏组件，数据返回之后，渲染真正的组件

| - skeletons
	  | - OrderSkeletons
	  	  | - index.js
	  	  | - index.less
	  | - index.js

index.js

export { default as OrderSkeletons } from './OrderSkeletons';

index.js

import React, { useState, useEffect } from 'react';

import './index.less';

export default function (props) {
  const [state, setState] = useState(Array(3).fill(1));

  useEffect(() => {

  }, [])

  return (
    <div className='order-skeletons'>
      {state.map(item => (
        <div className='order-item' key={item}>
          <div className={'skeletons left'}></div>
          <div className='center'>
            <div className={'skeletons title'}></div>
            <div className={'skeletons price'}></div>
            <div className={'skeletons time'}></div>
          </div>
          <div className={'skeletons pay'}>
          </div>
        </div>
      ))}
    </div>
  )
}

index.less

@import '../../assets/mixin.less';

.order-skeletons {
  .order-item {
    .flex(row, flex-start);
    margin-bottom: 12px;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    .left {
      width: 120px;
      height: 80px;
    }
    .center {
      flex: 1;
      margin: 0 12px;
      .price {
        margin: 12px 0;
        width: 50px;
      }
      .time {
        width: 120px;
      }
    }
    .pay {
      margin-right: 4px;
      width: 70px;
      height: 30px;
    }
  }
}


/* Skeletons效果 */
.skeletons {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 20px;
  background-color: #ededed;
}
.skeletons:empty::after {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(216, 216, 216, 0.253), transparent);
  animation: loading 1.5s infinite;
}

@keyframes loading { /* 骨架屏动画 */
  from {
    left: -100%;
  }
  to {
    left: 120%;
  }
}

mixin.less

.flex(@direction:row, @justify:center, @align:center){
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
}

组件用法

import { OrderSkeletons } from '@/skeletons'

export default function(props){
  const [state, setState] = useState()

  useEffect(() => {

  }, [])
  console.log(props)

  return (
    <div>
      {isEmpty(props?.orders) ?
        <OrderSkeletons toast /> :
        <div className='tab-lists'>
          //....
        </div>
      }
    </div>
  )
}