在现代 Web 应用中，用户体验是至关重要的。在用户进行某些操作时，如果没有及时给出反馈，会让用户感到困惑和不满。其中一个体验问题是长时间等待请求返回时的空白页面，这时候可以使用 Loading 效果来告知用户请求正在处理中。
React 是一个非常流行的前端框架，它提供了许多工具和模块来帮助开发者创建高效的单页应用程序（SPA）。 在本文中，我们将学习如何在 React SPA 应用程序中实现全局 Loading 效果。
方案一：使用第三方库
React 社区中存在许多第三方库，可以帮助我们快速地实现 Loading 效果。其中最受欢迎的是 react-loading-overlay。
安装
使用 npm 安装：
npm install react-loading-overlay --save
使用
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- ------------------------
-------- ----- -
----- --------- ----------- - ----------------
----- --------- - ----- -- -- -
-----------------
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
------ -----
--
------ -
--------------- ---------------- ------- ------------------
------- ---------
-----------------
--
-
------ ------- ----在上面的示例代码中，我们使用 useState 钩子来创建一个名为 loading 的状态变量。当 loading 变量为 true 时，我们将显示 LoadingOverlay 组件。 可以使用 active 属性来控制 Loading 效果是否显示，spinner 属性可以设置 Loading 效果的图标类型，text 属性可以设置 Loading 效果的文本提示。
使用 fetchData 函数来模拟异步请求。我们在请求开始时将 loading 状态设置为 true，在请求结束时将其设置为 false。在 LoadingOverlay 组件中包裹我们的应用程序代码。
方案二：自定义实现
如果你想自定义 Loading 效果，可以使用 React 的 Context API 和 useReducer 钩子来实现。下面是一个示例：
创建 Context
-- -------------------- ---- -------
------ ------ - -------------- ---------- - ---- --------
----- ------------ - -
-------- ------
--
----- ------- - ------- ------- -- -
------ ------------- -
---- --------------
------ - --------- -------- -------------- --
--------
------ ------
-
--
------ ----- ---------- - ----------------------------
------ ----- ----------- - -- -------- -- -- -
----- ------- --------- - ------------------- --------------
----- ---------- - --------- -- -
---------- ----- -------------- -------- ------- ---
--
------ -
-------------------- -------- --------- ---------- ---
----------
----------------------
--
--在上面的示例代码中，我们首先定义了一个 initialState，其中包含一个名为 loading 的状态变量。reducer 函数用于处理状态变化的逻辑。然后，我们使用 createContext 创建了一个名为 AppContext 的 Context 对象，并导出了 AppProvider 组件，它是一个包装器组件，将 AppContext 上下文提供给应用程序中的所有组件。
在 AppProvider 组件中，我们使用 useReducer 钩子来创建状态管理器，并定义了一个名为 setLoading 的函数，用于更新 loading 状态。最后，我们使用 AppContext.Provider 组件将 loading 状态和 setLoading 函数提供给应用程序中的所有组件。
使用 Context
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ---------- - ---- ---------------
-------- ----- -
----- - -------- ---------- - - -----------------------
----- --------- - ----- -- -- -
-----------------
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
------------------
------ -----
--
------ -
--
-------- -- ----------------------
------- ---------
---
--
-
------ ------- ----在上面的示例代码中，我们使用 useContext 钩子来访问 AppContext 上下文中的 loading 状态和 setLoading 函数。在 fetchData 函数中，我们使用 setLoading 函数来更新 loading 状态。最后，我们在应用程序中使用 loading 状态来控制 Loading 效果的显示。
结论
在本文中，我们学习了两种在 React SPA 应用程序中实现全局 Loading 效果的方法。第一种方法是使用第三方库 react-loading-overlay，它提供了一个简单易用的组件来实现 Loading 效果。第二种方法是自定义实现，使用 React 的 Context API 和 useReducer 钩子来管理状态变量。这两种方法都可以帮助我们提高用户体验，让用户感到应用程序是响应的并且在处理请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67270aae2e7021665e1c031d