简介
React 是目前最流行的前端开发框架之一，它可以轻松地构建复杂的用户界面。然而，在开发过程中，当加载较大组件或 API 请求时，可能会出现长时间的白屏等待时间。这时，为了给用户更好的用户体验，我们可以使用一些加载动画来告诉用户正在加载中。这篇文章将介绍一个 npm 包 react-page-loading，它能够很好地解决这个问题。
安装
在您的 React 项目中使用 npm 包管理器来安装 react-page-loading。
npm install react-page-loading --save
使用
在组件中引入 react-page-loading 库
import PageLoading from 'react-page-loading';
将组件包裹在 PageLoading 组件中：
<PageLoading loader={"bar"} color={"#4B8EEE"} size={10} duration={1}>
<YourComponent />
</PageLoading>PageLoading 组件有四个必填的 props：
loader表示加载动画类型，支持“bar”和“spin”两种类型；color表示加载动画的颜色；size表示加载动画的大小；duration表示加载动画的持续时间，单位为秒。
对于经常使用的 props，建议可以将其写成全局变量，并在使用 PageLoading 时直接引用。如下：
-- -------------------- ---- ------- ------ ----------- ---- --------------------- ----- ------ - ------- ----- ----- - ---------- ----- ---- - --- ----- -------- - -- --- ------------ --------------- ------------- ----------- -------------------- -------------- -- --------------
示例
下面的示例展示了如何使用 react-page-loading 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ---------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
-------- -----
----- ----
--
-
------------------- -
----------------
-
----- ---------- -
----- -------- - ----- ------------------------------------------------------
----- ---- - ----- ----------------
--------------- ----- -------- ----- ---
-
-------- -
----- - -------- ---- - - -----------
------ -
---- ----------------
-------- -
------------ -------------- ----------------- --------- -------------
---------------------
-------------- -
-----------------------
-
------
--
-
-
------ ------- ----上面的示例中，先定义了一个状态 loading，表示数据是否正在加载中。在 componentDidMount 生命周期中，使用 fetch 请求数据，并更新状态。最后，在 render 方法中，如果数据正在加载中，则显示加载动画，否则显示数据。
总结
使用 react-page-loading 组件可以让我们在加载数据时更好地提升用户体验，避免长时间的白屏等待时间。使用起来也非常简单，只需要传递几个必填的 props 即可，同时也提供了多种常用设置供我们使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b42c6eb7e50355dbd66