前言：
在前端开发中，适配不同设备的页面是一个必须要解决的问题。我们需要为不同的设备提供不同的样式与交互效果，以使页面在各个设备的浏览器上正确渲染。如何实现页面的响应式设计呢？这里介绍一个 npm 包：react-responsive-hoc，可快速解决页面响应式设计的问题。
1. 什么是 react-responsive-hoc？
react-responsive-hoc 是一个简单易用的 React 高阶组件（HOC），用于在 React 应用中实现响应式页面设计。它可以方便地根据用户设备的屏幕宽度（断点）加载对应的组件渲染效果，并提供了组件是否在断点之内的判断方法。
2. 安装 react-responsive-hoc
使用 npm 安装 react-responsive-hoc：
npm install react-responsive-hoc --save
3. 使用 react-responsive-hoc
3.1 创建响应式组件
react-responsive-hoc 使用起来非常简单，可以通过 HOC 的方式将响应式属性传递到组件中。首先，我们需要创建一个响应式的组件，在组件中根据屏幕宽度（断点）确定所需渲染的内容。
例如，我们要创建一个响应式的菜单组件，当屏幕宽度大于等于 768px 时，显示水平菜单，否则显示垂直菜单：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - -- -------- -- -- -
-- ---------------
----- ---- - -------- - ------------- -- - --------------- ---
------ -
-----
- ---- -
------
--
--
------ ------- -------3.2 使用 withResponsiveness HOC 获取断点信息
接下来，我们将 withResponsiveness 高阶组件作为一个包裹层，把响应式组件作为参数传递进去，以获取当前设备屏幕的断点信息。withResponsiveness HOC 会在响应式组件中注入 isMobile、isTablet 和 isDesktop 三个属性，用于表示当前屏幕是否处于断点内。
import { withResponsiveness } from 'react-responsive-hoc';
const ResponsiveMenu = withResponsiveness(MyMenu);如上所示，我们创建了一个 ResponsiveMenu 组件，并使用 withResponsiveness HOC 包裹了 MyMenu 组件。此时 ResponsiveMenu 组件已经可以响应式地根据当前的屏幕宽度加载对应的菜单渲染效果了。
3.3 渲染响应式组件
最后，我们在应用中渲染 ResponsiveMenu 组件即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
----- --- - -- -- -
------ -
--------------- --
--
--
------ ------- ----4. 总结
本文介绍了 npm 包 react-responsive-hoc 的使用方法，通过使用 withResponsiveness 高阶组件，可以轻松地实现响应式页面设计，提高了前端开发的效率。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------ - ---- -----------------------
----- -------------- - -- -- -
------ -
----
------ ----------------------
------ -----------------------
------ --------------------------
------ -------------------------
-----
--
--
----- ------------ - -- -- -
------ -
--------
------- --------------------------
------- ----------------------------
------- ----------------------------------
------- --------------------------------
---------
--
--
----- ------ - -- -------- -- -- -
----- ---- - -------- - ------------- -- - --------------- ---
------ -
-----
- ---- -
------
--
--
----- -------------- - ---------------------------
----- --- - -- -- -
------ -
--------------- --
--
--
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600564e681e8991b448e18ab