如何在 React 中实现全局 Loading 状态-JavaScript中文网-JavaScript教程资源分享门户

如何在 React 中实现全局 Loading 状态

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

在 React 中，有很多情况下需要展示 Loading 状态，例如在发送网络请求时，数据加载时等待用户反馈。本文将介绍如何在 React 中实现全局 Loading 状态。我们将讨论如下内容：

确定全局 Loading 状态的需求和实现方式。
使用 React Context 和 Hook 实现全局 Loading 状态。
将全局 Loading 状态封装成一个可复用的组件。

1. 确定全局 Loading 状态的需求和实现方式

在实现全局 Loading 状态之前，首先需要确定实现的目的和使用场景。全局 Loading 状态应该满足以下两个基本需求：

在应用加载或数据请求时，全局 Loading 状态应该显示。
当应用加载或数据请求完成后，全局 Loading 状态应该隐藏。

实现全局 Loading 状态的方式有很多种，例如使用 Redux 或者使用 React 的 Context 和 Hook。在本文中，我们将使用 React 的 Context 和 Hook 实现全局 Loading 状态。

2. 使用 React Context 和 Hook 实现全局 Loading 状态

在使用 React Context 和 Hook 实现全局 Loading 状态之前，需要先了解一下 React Context 的基本概念和使用。

2.1 React Context

React Context 是 React 提供的一种跨层级传递数据的机制。使用 React Context 将数据保存在 Context 中，可以在子组件中使用该数据，而不必通过 props 一层层的传递数据。React Context 有三个核心方法：

createContext: 创建一个 Context。
Provider: 提供一个 Context。
Consumer: 使用 Context。

2.2 使用 React Context 和 Hook 实现全局 Loading 状态

在使用 React Context 和 Hook 实现全局 Loading 状态之前，我们首先需要创建一个 Context 对象。

----- -------------- - ----------------

LoadingContext 是一个 Context 对象，它将会保存在 React 组件树中，并被子组件所共享。接下来，我们来实现一个 LoadingProvider 组件，该组件用于保存和更新全局 Loading 状态。

-------- ---------------------- -
  ----- --------- ----------- - ----------------

  ----- ----- - ---------- -- -
    ------ -
      --------
      -----------
    --
  -- -----------

  ------ ------------------------ ------------- ---------- ---
-

在 LoadingProvider 组件中，我们使用 useState Hook 创建了一个状态 loading 和更新状态的方法 setLoading。这个状态变量将会保存全局 Loading 的状态。我们通过 useMemo 和 value 将 loading 和 setLoading 方法保存在了一个对象中，然后将该对象作为 value 通过 props 传递给 Context.Provider。这样子组件就可以通过 Consumer 和 useContext Hook 来获取 loading 和 setLoading 方法了。

接下来，我们来实现一个 useLoading Hook，它是一个自定义 Hook，用于获取 loading 和 setLoading。

-------- ------------ -
  ----- - -------- ---------- - - ---------------------------
  ------ - -------- ---------- --
-

在 useLoading Hook 中，我们使用 useContext Hook 获取了 LoadingContext 中的 loading 和 setLoading。

现在，我们就可以在子组件中随时获取全局 Loading 状态了。例如，我们可以在页面中使用 LoadingProvider 包裹数据请求的组件。当数据请求时，我们可以设置 loading 为 true，在数据返回时，我们可以设置 loading 为 false。在组件中可以这样使用 LoadingContext 和 useLoading Hook。

------ - ---------- - ---- --------------------

-------- ---------------------- -
  ----- - -------- ---------- - - -------------
  ----- ------ -------- - -------------

  ------------ -- -
    -----------------
    ----------------------- -- -
      ------------------
      --------------
    ---
  -- ----

  -- --------- -
    ------ ----------------------
  -

  ------ ------------------
-

3. 将全局 Loading 状态封装成一个可复用的组件

在使用 React Context 和 Hook 实现全局 Loading 状态后，我们可以将该实现封装成一个可复用的组件。例如下面的 Loading 组件就可以实现全局 Loading 状态。

------ - ---------- - ---- --------------------

-------- --------- -------- -- -
  ----- - ------- - - -------------

  ------ -
    -----
      -------- -- ----------------------
      ----------
    ------
  --
-

------ ------- --------

这样，我们就可以在整个应用中使用 Loading 组件，实现全局 Loading 状态的效果了。

结论

本文介绍了如何在 React 中实现全局 Loading 状态。通过使用 React Context 和 Hook，我们实现了 LoadingProvider 组件，用于保存和更新全局 Loading 状态，以及 useLoading Hook，用于获取全局 Loading 状态。最后，我们将该实现封装成了一个可复用的 Loading 组件。全局 Loading 状态在一些场景下可以优化用户体验，通过本文提供的方法，可以更加快速和方便地实现全局 Loading 状态。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/671c95dd9babaf620fb170f5