前言
在设计网页时，为了提高用户体验，一般使用图像、动画、特效等手段来使界面更加美观且吸引人，但这些元素的加载时间成本是显著的，尤其是在网速缓慢或者设备较老的情况下，加载时间会更长，甚至导致用户流失。此时在网页元素未加载完成时，使用加载占位图可以给用户一种快速反应的体验，由此，出现了骨架屏(skeleton screen)。
针对网页中出现的这个需求，有一个叫做 react-skeleton-screen 的 npm 包，帮助我们快速生成漂亮的骨架屏，并且使用简单，许多前端爱好者和开发者都使用过它，本篇文章就将围绕它进行详细的讲解，带领大家了解 react-skeleton-screen 的优势以及如何使用它。
安装
在使用 react-skeleton-screen 包之前，需要使用 npm 进行安装，安装命令如下：
npm install react-skeleton-screen --save
导入
在安装完成之后，需要在项目中引入 react-skeleton-screen，可选到全局引入或局部引入（视具体项目情况而定）。
// [...].js
import React, { Component } from 'react';
import Skeleton from 'react-skeleton-screen';简单使用
在项目中使用 react-skeleton-screen 十分容易，直接替换占位元素，当元素未加载成功时，就会自动渲染出占位效果。下面我们看一个简单的实际例子：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------- ------
--
-
------------------- -
-- ----------------
------------- -- -
---------------
------- -----
---
-- ------
-
-------- -
------ -
-----
--------------------
-----
------------------ - -
---- --------- -------- --
- - -
--------- ----------- ------------ --
--
------
------
--
-
-
------ ------- ------------在此我们设置了一个 loaded 状态，在 componentMount 生命周期中模拟加载过程，加载完成后将 loaded 置为 true，判断完成之后，依据 loaded 状态进行图片的渲染。
在没有加载完成时，会渲染出宽度为 300，高度为 300 的骨架占位图，如下所示：
<Skeleton width={300} height={300} />下面我们来看看，如何设置自定义的占位样式。
自定义样式
默认情况下，react-skeleton-screen 会自动采用默认模板样式进行渲染，当然，如果不想使用这些不能令人满意的样式，我们也可以自定义进行适应性调整。下面提供两种方式：
1. 使用默认模板，自定义部分样式
我们可以选择使用默认样式，只需覆盖样式表中的部分样式即可。
-- -------------------- ---- ------- -- --------- ---------------- - ----------------- -------- -------------- ----- - ---------------- -------------- - ------- ----- ------- ---- -- -
这是样式表中一部分，其中 background-color 表示背景颜色，border-radius 表示边框圆角，height 表示高度，margin 表示外边距。我们可以在自己的样式表中使用 !important 来覆盖原先的样式，使骨架图片变得更美观。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- ------------------------
------ -------------- -- -------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------- ------
--
-
------------------- -
-- ----------------
------------- -- -
---------------
------- -----
---
-- ------
-
-------- -
------ -
-----
--------------------
-----
------------------ - -
---- --------- -------- --
- - -
--------- ----------- ------------ --
--
------
------
--
-
-
------ ------- ------------2. 使用自己的模板
需要说明的一点是，react-skeleton-screen 已经预设了两种模板。
- Skeleton.defaultProps.template 默认模板（默认显示的骨架占位图）
- TwoRowRect.template 作为备选模板
方法如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- - ------------- - ---- ------------------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
------- ------
--
-
------------------- -
-- ----------------
------------- -- -
---------------
------- -----
---
-- ------
-
----------- - -- -- -
------ -
---- --------------- ----- --------------- ---- ---------------- ----------------
---- --------------- ----- --------------- ------- ------ --------
---- -------------- ----- ------ -------------
---- ------------------ ----- ------- ----- ------ ------------
---- ------------------ ----- ------- ----- ------ ------------
------
---- ------------- ----- ------- -------------
--------
--
-------- -
------ -
-----
--------------------
-------------- --------------- -------------------------
------------------ - -
---- --------- -------- --
- - -
--------- ----------------------------------- --
--
----------------
------
--
-
-
------ ------- ------------在定义模板字符串时，一定要按照 react 的标准写法正确的书写，否则会出现解释预览出错的情况。
结语
文章中，主要介绍了 react-skeleton-screen 的安装，导入和使用教程，以及自定义和默认模板的两种方式。相信大家看完之后有了自己的理解。在使用 react-skeleton-screen 包的时候理解清楚，使用正确的方式，才能够达到我们想要的美观效果。希望本文对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7181e8991b448e5efb