前言
随着 SPA(Single Page Application) 技术的发展，越来越多的网站和应用开始采用 SPA 技术来构建，因为 SPA 技术提供了更快的用户体验和更现代的界面交互。然而，在用户发起页面切换的同时，加载时间会耗费一定时间。因此，为用户提供反馈信息非常重要。其中，Loading 效果是一个非常有效的方式，能够告诉用户正在加载内容，提高用户体验。在本篇文章中，我们将讨论如何在 React 中实现 SPA 应用全局 Loading 效果。
实现思路
为了实现全局 Loading 效果，我们需要创建一个 Loading 组件，然后在业务组件中添加 Loading 组件。当业务组件发起 API 请求时，显示 Loading 组件，等待 API 请求返回数据后，隐藏 Loading 组件。
创建 Loading 组件
创建 Loading 组件很简单，我们可以通过 CSS 和 SVG 实现。以下是一个简单的 Loading 组件实现：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - -- -- -
------ -
---- ------------------------------
----
-------------------
----------
-----------
---------- - -- ---
----------------------------------
-
------- ------------------------ ------- ------- ------ ----------- -------------------------
------
------
-
-
------ ------- --------以上代码中，我们定义了一个包含 SVG 元素的 React 组件，用于显示 Loading 效果。
在业务组件中使用 Loading 组件
为了在业务组件中使用 Loading 组件，我们需要定义一个高阶组件，用于包装业务组件。高阶组件的作用是，在业务组件发起 API 请求时，显示 Loading 组件。
以下是一个简单的高阶组件实现：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ------- ---- ------------
----- ----------- - ------------------ -- -
------ ------- -- -
----- --------- ----------- - ----------------
----- ----------- - -- -- -
-----------------
-
----- ----------- - -- -- -
------------------
-
------ -
----------------
-------- -- -------- ---
----------------- ---------- ------------------------- ------------------------- --
-----------------
--
--
--
------ ------- ------------以上代码中，我们定义了一个 withLoading 高阶组件，它会接受一个业务组件作为参数，并返回一个新的高阶组件。新的高阶组件包装了业务组件，在业务组件中显示 Loading 组件。
在业务组件中发起 API 请求
为了在业务组件中发起 API 请求，我们需要使用 React 的生命周期钩子函数。在 componentDidMount 函数中，我们可以调用 showLoading 函数显示 Loading 组件，并在 componentDidUpdate 函数中，调用 hideLoading 函数，隐藏 Loading 组件。
以下是一个使用 fetch 发起 API 请求的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----------- ---- ----------------
----- ----------- ------- --------- -
------------------- -
-------------------------
---------------------------------------------------
-------------- -- ----------------
----------- -- -
-------------------------
-------------------
---
-
-------- -
------ -
------- ---------------
-
-
-
------ ------- -------------------------在以上示例代码中，我们使用了 fetch 函数发起 API 请求，在 componentDidMount 函数中调用 showLoading 函数，显示 Loading 组件，等待 API 请求返回数据后，在 then 函数中调用 hideLoading 函数，隐藏 Loading 组件。
总结
在本篇文章中，我们学习了如何在 React 中实现 SPA 应用全局 Loading 效果。通过创建 Loading 组件，定义高阶组件，并在业务组件中发起 API 请求，我们能够为用户提供更好的用户体验。这种思考问题的方式和实现方法，不仅适用于 Loading 效果，还可以应用于其他页面反馈效果的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e71ba4f6b2d6eab3277e29