简介
sui-skeleton 是一个基于 react 实现的骨架屏生成库，用于在页面加载时先显示一个占位符，等到页面加载完成后再展示真正的内容。使用骨架屏可以优化用户体验，让用户感觉页面加载更快，提高用户留存率和转化率。
安装
可以通过 npm 安装 sui-skeleton：
--- ------- ------------ ------
也可以使用 yarn 安装：
---- --- ------------
使用步骤
1. 引入 sui-skeleton
------ -------- ---- ---------------
2. 创建骨架模板
----- ---------------- - -
----- -
-
------ ----
------- ----
------------- ------
------- -- ---- ------
--
-
------ ---
------- ---
------- -- ------
-
--
--以上定义了一个骨架模板，其中包含了两个占位符，一个是一个圆形的图片，宽高为 100，圆角半径为 50%，上下外边距为 0(auto)、10px，另外一个是一个矩形区域，宽度为 50，高度为 10，上下外边距为 0(auto)，左右外边距为 0(auto)。当网页在加载时，这个骨架模板将会被展示出来。
3. 渲染骨架屏
-------- ------------- -
------ -
--------- --------------------------- --
--
-在这个示例中，我们创建了一个 MyComponent 组件，并在其中引入了 Skeleton 组件，并将骨架模板传递给 template 属性。这样就完成了骨架屏的渲染。
4. 加载完成后展示真正的内容
-------- ------------- -
----- -------- ---------- - ----------------
------------ -- -
------------------
-------------- -- ----------------
---------- -- -
-- ---------
----------------
---
-- ----
------ -
------ - ---------------- - --------- --------------------------- --
--
-在这个示例中我们创建了一个 MyComponent 组件，它有一个 loaded 状态，初始时值为 false。在组件挂载后，我们使用 fetch 函数异步加载数据，并在加载完成后更新 loaded 状态为 true，然后展示真正的内容。
在组件渲染时，我们使用三目运算符判断 loaded 状态，如果为 true，就渲染真正的内容，否则渲染骨架屏。这样就完成了骨架屏的展示和真正内容的加载。
总结
sui-skeleton 是一个很方便的骨架屏生成库，可以有效提高用户体验和转化率。在使用时需要定义好骨架模板，并在加载完成后展示真正的内容。
完整代码示例：
------ -------- ---- ---------------
------ - --------- --------- - ---- --------
----- ---------------- - -
----- -
-
------ ----
------- ----
------------- ------
------- -- ---- ------
--
-
------ ---
------- ---
------- -- ------
-
--
--
-------- ------------- -
----- -------- ---------- - ----------------
------------ -- -
------------------
-------------- -- ----------------
---------- -- -
-- ---------
----------------
---
-- ----
------ -
------ - ---------------- - --------- --------------------------- --
--
-来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600553ad81e8991b448d0e9d