背景
无论是在前台还是后台，网络请求时不可避免地会遇到请求响应速度慢或数据量大等情况，就需要在前端展现给用户一个“加载中”的界面。而 React 和 Redux 的出现，大大简化了前端数据状态管理的复杂度，可以轻松处理 Loading 状态。
在本文中，我们将重点讨论在 React + Redux + Material-UI 中如何处理 Loading 状态，将详细讲解控制 Loading 状态所需具备的概念和技术，并给出实例代码供读者参考。
概念
Loading 状态
Loading 状态是指在用户等待数据处理过程中展现的界面状态，常见的有等待图案、加载中文字等，一般用于在数据处理时告诉用户现在系统正在处理用户的请求，请耐心等待。
高阶组件（HOC）
高阶组件（HOC）是一个函数，接受一个组件并返回一个新组件。HOC 组件可以用来重用组件逻辑、抽象状态和控制组件渲染的特性等。
技术
在 React + Redux + Material-UI 中处理 Loading 状态，我们需要以下技术：
Redux 的状态管理
使用 Redux 管理状态，包括存储正在加载状态的状态变量；
新建高阶组件
使用高阶组件实现 Loading 状态以及展示 Loading 状态的组件；
后端请求状态监测
获取后端请求状态，控制 Loading 状态的开启和关闭。
实例
下面是一个示例展示，在创建高阶组件来控制 Loading 状态时如何应用上述技术。
首先，我们需要在 Redux store 中定义一个状态变量来存储 Loading 状态：
-- -------------------- ---- ------- ----- ------------ - - ---------- ----- -- ----- ----------- - ------ - ------------- ------- -- - ------ ------------- - ---- ---------------- ------ - --------- ---------- ---- -- ---- ------------------ ------ - --------- ---------- ----- -- ---- --------------- ------ - --------- ---------- ----- -- -------- ------ ------ - --展开代码
上面的 initialState 中的 isLoading 变量就是用来存储 Loading 状态的变量。我们可以定义三个 action 分别用来表示请求开始、请求成功以及请求失败，这里简单定义一个 action，实际需要根据每个项目的具体需求进行定义。请求开始时打开 Loading 状态，请求结束则关闭。
接下来，我们可以创建一个高阶组件 LoadingHOC，它接受一个组件作为参数，如果 isLoading 为 true，则渲染出 Loading 组件，否则返回正常的组件：
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ------- - ---- -------------- ------ ------- ---- ------------ ----- ---------- - ---------------- -- - ----- --- ------- --------- - -------- - ------ -------------------- - -------- -- - ----------------- --------------- --- - -- ----- --------------- - ----- -- -- ---------- --------------- --- ------ ------------------------------ -- ------ ------- -----------展开代码
这里我们使用了 redux 的 connect 方法，将 isLoading 变量从 Redux store 中代理到 HOC 中。
最后，我们可以使用新建的 HOC 组件来包裹需要显示 Loading 状态的组件，并调用后端请求接口方法：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ---------- ---- --------------- ------ - ------------- - ---- -------- ----- ----------- ------- --------------- - ------------------- - --------------------------- - -------- - ----- ---- - ---------------- ------ - ----- ---------- -------------- -------- ---------- ------ -- - - ----- --------------- - ----- -- -- ----- ---------- --- ----- ------------------ - -------- -- -- -------------- -- -- ------------------------- --- ------ ------- ------------------------ ---------------------------------------------展开代码
在这里，我们将 MyComponent 用 LoadingHOC 进行包裹，控制 Loading 状态的展示。
总之，使用 React + Redux + Material-UI 可以通过新建 HOC 组件来处理加载状态并展示 Loading 状态。状态管理技术、高阶组件、后端请求监测等技术都必不可少，只有通过深入理解这些技术，才能更好地处理加载状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cd8c72e46428fe9e722c5a
