前端UI组件 | 如何实现一个骨架屏组件

前言

在过去的两个月中，我们的移动端项目重构UI组件，表单组件、Layout布局、弹框提示、导航、Card卡片等基础组件已经完成并应用到日常功能开发中。

一期的开发中，我们把基础的常用的组件基本都完成了。二期计划将一些不太常用但是能提升交互体验组件纳入开发计划，比如骨架屏，比如步骤条等。组件开发系列第一篇，让我们一起来实现一个骨架屏组件的开发吧。

项目使用的react框架，组件开发使用的hooks函数式组件。

知其然

何为骨架屏

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。

如何页面数据没有加载完毕，会展示空白，骨架屏的主要作用的替代白屏，展示页面的大致结构，直到页面数据完全返回。

何时使用

• 首次加载数据时，可能出现白屏，可以使用骨架屏替代白屏展示；
• 数据量较大的列表中，每次数据返回前，可以使用骨架屏做临时展示；
• 某些授权中间页，一般授权中间页并没有内容，所以会出现短暂的空白，可以使用骨架屏替代空白页展示。

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

知其所以然

图解组件

上图是我完成的骨架屏的实际效果。因为骨架屏是替代页面实际内容暂时的占位，所以一个常见骨架屏的结构和常见的列表结构很像，包括头像、标题、段落三个部分。想实现一个基本的骨架屏，也基本涵盖了这三个部分，而这三块内容的风格可以是直角也可以是圆角，为了增加用户体验，可以增加动画效果，其中头像是非必须的，可以不展示，标题和段落是必须的，但是展示长度可以变化。既然骨架屏是暂时的，那么一旦数据加载完成，实际内容需要渲染出来，骨架屏需要被隐藏，因此骨架屏展示可以有控制开关。

上面这段话，包含了基础的骨架屏开发的全部关键点，也帮我们屡清楚了开发是思路。 组件内容三部分：头像、标题、段落，组件传参props：头像对象、标题对象、段落对象、展示开关、动画效果、展示风格。

粮草先行

兵法有云：“兵马未动粮草先行”，组价开发也需要有序进行。前面，我们图解了骨架屏组件，清楚了它的结构和样式，不同样式和不同结构相互组合，能排列出不同的展示结构，而控制这些结构的关键在于组件的props传参，所以我们想开发一个组件，第一步要先定一下它的props传参，这也就是我们说的"粮草"。

PropTypes

在项目中使用自定义组件时，需要对组件的props进行类型检测。而React提供了专门的库，可以校验组件的props类型，也可以做一些特定的限制。关于PropTypes的详细介绍，可以看我另一篇文章【知识点】PropTypes提供的验证器，这里不做详细介绍。下面列出骨架屏组件的props类型校验，并做一一解读。

Skeleton.propTypes = {
  avatar: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示头像占位图
  title: PropTypes.bool, // 是否显示标题占位图
  paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.Object]), // 是否显示段落占位图
  show: PropTypes.bool, // 是否显示骨架屏，传 false 时会展示子组件内容
  active: PropTypes.bool, // 是否开启动画
  round: PropTypes.bool, // 是否将标题和段落显示为圆角风格
};

Skeleton.defaultProps = {
  avatar: false,
  title: true,
  paragraph: true,
  show: true,
  active: false,
  round: false,
};

avatar

是否显示头像占位图。

校验类型是布尔值和对象。

布尔值：控制图像模块是否展示，默认为false-不展示，可选true-展示。

对象：控制图像展示风格，包括：active-是否有动画效果，默认false-没有动画效果。shape-头像风格，默认circle-圆形，可选square-矩形；size-头像大小，默认default，可选large-较大， small-较小，number-具体值。

title

是否显示标题占位图。

校验类型是布尔值。

布尔值：控制图像模块是否展示，默认为true-展示，可选false-不展示。

paragraph

是否显示段落占位图

校验类型是布尔值和对象。

布尔值：控制段落模块是否展示，默认为true-展示，可选false-不展示。

对象：控制段落展示风格，包括：rows-设置段落的行数；width-设置段落的宽度，若为数组时则为对应段落每行宽度，反之则是最后一行的宽度。

show

骨架屏是否展示的开关。

校验类型是布尔值。

布尔值：控制骨架屏是否展示，默认为true-展示，可选false-不展示。

active

骨架屏是否开启动画效果。

校验类型是布尔值。

布尔值：控制骨架屏风格是否开启动画效果，默认为false-不开启动画效果，可选true-开启动画效果。

round

骨架屏风格是否是圆角。

校验类型是布尔值。

布尔值：控制骨架屏风格是否是圆角，默认为false-不是圆角，可选true-是圆角。

整顿兵马

props传参已设置好，接下来就可以进行下一步对“兵马”的整顿了。

正如我们前面所讲的，基础的骨架屏分为三个部分：头像、标题、段落，且实际内容加载完成之后可以选择隐藏骨架屏。所以“兵马”的布阵应该是这样的：

/** @name class前缀 */
const prefixCls = 'fly-skeleton';

/** @name 根元素class */
const rootCls = classnames(prefixCls, className, {
[`${prefixCls}--round`]: round,
[`${prefixCls}--active`]: active,
});

/** @name 内容class */
const contentCls = classnames(`${prefixCls}--content`);

return (
  <>
    {show ? (
      <div className={rootCls}>
        {avatarContent()}
        <div className={contentCls}>
          {titleContent()}
          {paragraphContent()}
        </div>
      </div>
    ) : (
      children
    )}
  </>
);

当参数show设置为true时，展示骨架屏内容，反之展示骨架屏组件内容包裹的子组件的内容即页面真实内容。其中头像、标题、段落又分别提炼成了方法，这样的处理，让组件的结构很清楚，易于维护。下面，我们来看这三块内容到底是怎么实现的。

头像

头像模块的功能实现如下：

/** @name 是否展示头像 */
const hasAvatar = !!avatar;

/** @name 尺寸枚举 */
const sizgClsObj = {
  large: 'lg',
  small: 'sm',
  default: null,
};

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 头像展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const avatarContent = () => {
  if (hasAvatar) {
    /** @name 头像对象数据 */
    let avatarObj = {
      active: false,
      shape: 'circle',
      size: 'default',
      ...getTypeOfObject(avatar),
    };

    /** @name 头像父容器class */
    const headCls = classnames(`${prefixCls}__header`);

    /** @name 头像class */
    const avatarCls = `${prefixCls}__avatar`;

    /** @name 尺寸class */
    const sizeCls = sizgClsObj[avatarObj.size] && classnames(`${avatarCls}--${sizgClsObj[avatarObj.size]}`);

    /** @name 形状class */
    const shapeCls = classnames(`${avatarCls}--${avatarObj.shape}`);

    /** @name 尺寸内联样式 */
    const sizeStyle =
      typeof avatarObj.size === 'number'
        ? {
            width: avatarObj.size,
            height: avatarObj.size,
            lineHeight: `${avatarObj.size}px`,
          }
        : {};

    return (
      <div className={headCls}>
        <span className={classnames(avatarCls, sizeCls, shapeCls, className)} style={{ ...sizeStyle }} />
      </div>
    );
  }
};

在上面的代码中，主要做了以下功能：

1.展示控制

通过avatar参数控制展示与否，如果骨架屏组件上的props没有avatar参数，则不展示头像模块，反之则展示；

2.头像大小

通过avatar参数中的size属性控制头像大小。

size值默认是default，可以设置固定变量值如：large-较大，small-较小，也可是设置具体数值，当设置具体数值的时候，会使用内联样式进行覆盖，将头像的宽度和高度的值设置为当前数值，单位均为像素。

3.头像风格

通过avatar参数中的shape属性控制头像风格。

shape的值默认是circle，也就是圆角风格，头像展示样式为圆形，如果shape的值设置为square，那么展示效果会为矩形。

标题

标题模块的功能实现如下：

/** @name 是否展示标题 */
const hasTitle = !!title;

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 标题展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const titleContent = () => {
  if (hasTitle) {
    /** @name 标题class */
    const titleCls = classnames(`${prefixCls}__title`);

    /** @name 标题style */
    const titleStyle = {
      width: !hasAvatar ? '35%' : '50%',
      ...getTypeOfObject(title),
    };

    return <h3 className={titleCls} style={titleStyle} />;
  }
};

标题模块的实现相较于头像会简单一些：

1.展示控制

通过title参数控制展示与否，默认展示标题，如果想隐藏标题，可以设置title的值为false；

2.标题宽度

通过title参数中的width属性控制标题宽度。

如果width变量设置了具体值，标题宽度取设置的值。不设置值的情况下，如果有头像则宽度的值默认为50%，如果没有头像则宽度的值默认为35%，当有头像的情况下，标题父容器的宽度会变小，所以对应值设置要大于没有头像的值。

段落

段落模块的功能实现如下：

/** @name 是否展示段落 */
const hasParagraph = !!paragraph;

/**
 * 获取对象属性值
 * @param {void} 无
 * @return {render} 展示内容
 */
const getTypeOfObject = prop => {
  if (prop && typeof prop === 'object') {
    return prop;
  }
  return {};
};

/**
 * 段落-获取段落宽度
 * @param {number} index 段落的索引
 * @param {object} obj 段落的数据对象
 * @return {number} 计算之后的宽度
 */
const getParagraphWidth = (index, obj) => {
  const { width, rows = 2 } = obj;
  // =>true: 如果width的值是数组时，设置每行对应宽度
  if (Array.isArray(width)) {
    return width[index];
  }
  // =>true: 如果width的值不是数组时，设置为最后一行的宽度
  if (rows - 1 === index) {
    return width;
  }
  return undefined;
};

/**
 * 段落展示
 * @param {void} 无
 * @return {render} 展示内容
 */
const paragraphContent = () => {
  if (hasParagraph) {
    /** @name 段落class */
    const paragraphCls = classnames(`${prefixCls}__paragraph`);
    let paragraphObj = {};

    // =>true: 有标题但是没有头像，默认3行，其他是2行
    if (!hasAvatar && hasTitle) {
      paragraphObj.rows = 3;
    } else {
      paragraphObj.rows = 2;
    }

    // => true: 没有标题或者没有头像，最后一个段落的宽度是61%
    if (!hasAvatar || !hasTitle) {
      paragraphObj.width = '61%';
    }

    // =>true: paragraph传参有值时，对默认值进行覆盖
    paragraphObj = {
      ...paragraphObj,
      ...getTypeOfObject(paragraph),
    };

    /** @name 段落的行数组 */
    const rowList = [...Array(paragraphObj.rows)].map((_, index) => <li key={index} style={{ width: getParagraphWidth(index, paragraphObj) }} />);

    return <ul className={paragraphCls}>{rowList}</ul>;
  }
};

段落的实现相对复杂一些，其中主要处理是针对段落行数的处理：

1.展示控制

通过paragraph参数控制展示与否，默认展示标题，如果想隐藏标题，可以设置title的值为false；

2.段落宽度

通过paragraph参数中的width属性控制段落宽度。如果width的值设置为数组，每行的宽度对应为数组中的值，如width值是具体数值或者字符串类型的值，那么段落最后一行的值会被设置。

3.段落的行数

通过paragraph参数中的rows属性控制段落的行数。如果rows属性有值，那么段落行数为rows的值，如果rows属性没有设置值，那么没有头像有标题的情况下，段落行数设置为3行，反之设置为2行。

优秀兵法

到此，”粮草兵马“皆已备齐，骨架屏组件圆满完成。接下来可以尝试在页面中使用它了，让骨架屏成为我们在日常开发中提升用户体验的优秀”兵法“。

组件使用

完整API

Skeleton

属性	说明	类型	默认值
paragraph	是否显示段落占位图	boolean | SkeletonParagraphProps	true
title	是否显示标题占位图	boolean | SkeletonTitleProps	true
avatar	是否显示头像占位图	boolean | SkeletonAvatarProps	false
show	是否显示骨架屏，传 false 时会展示子组件内容	boolean	true
active	是否开启动画	boolean	false
round	是否将标题和段落显示为圆角风格	boolean	false

SkeletonParagraphProps

属性	说明	类型	默认值
width	设置段落的宽度，如果是数组则为每行的宽度，反之为最后一行的宽度	number | string | Array<number | string>	-
rows	设置段落的行数	number	-

SkeletonTitleProps

属性	说明	类型	默认值
width	设置标题宽度	number | string	-

SkeletonAvatarProps

属性	说明	类型	默认值
active	是否开启动画效果，仅在单独使用头像骨架时生效	boolean	false
shape	设置头像的形状，可选值circle | square	string	circle
size	设置头像的大小，可选值number | large | small | default	number | string	default

总结

整个流程下来，我们就实现了一个基础的骨架屏组件，对骨架屏也有了系统的了解，如果自己尝试去实现也会有思路怎么做。

但是，这只是实现了基础功能，并不完善，比如不支持头像、按钮等元素的单独使用。我在完成之后，去antd的官网看了一下它的源码，发现antd的功能做的更加完善，不愧是大厂的项目。从antd处获取的灵感，也让我完善了一下我的代码。所以，我们可以在日常的空闲时间，看一些大厂的源码，他们的功能更加强大、考虑问题更全面、实现思路也更优秀。

开头难吗？有时候挺难的，但是有了这个困难且良好的开头，后面的事就变得简单且顺利了，组件开发也会自然而然，水到渠成。所以，诸君加油。

再次感谢所有的开源项目，可以让像我一样的学习者获取技术上的进步。