React-Media 是一个 React 组件，它可以帮助开发者根据不同的媒体查询，动态地渲染不同的组件和样式。该组件不仅可以轻松实现响应式设计，还可以帮助开发者改进页面性能，减少资源加载。
安装
你可以使用 NPM 或 Yarn 安装 React-Media ：
npm install react-media # 或者 yarn add react-media
如何使用
使用 React-Media 构建响应式页面有两个主要步骤：
1. 创建响应式组件
React-Media 这个库包含一个名为 Media 的组件，你可以将你的组件包裹在它内部并指定你想匹配的媒体查询：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
----- ---------------- - -- -- -
------ ---------- ------ - --------- --- -- ------ - --------- --- - ---
-------- -- -
-----
------------------ - ------- - -------- --------------
------
--
--------
--上面的代码中，在 Media 组件的 queries 属性中，我们定义了两个媒体查询：small 和 large。当用户的屏幕宽度小于 600 像素时，small 查询将匹配，否则 large 查询将匹配。根据查询的结果，我们展示相应的组件。
在 Media 组件中，matches 参数是一个对象，它包含每个查询的布尔值（即是否匹配）的集合。在上面的示例中，我们使用了三元运算符根据 small 查询是否匹配来决定是否展示 'Small Component' 或 'Large Component'。
2. 想组件传递查询结果
你也可以将查询得到的结果传递给你的组件。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------
----- ---------------- - -- -- -
------
---------- ------ - --------- --- -- ------- - --------- ---- --------- ---- -- ------ - --------- ---- - --
-
-------- -- -
-----
------------------ ----------------- --
------------------- ----------------- --
------------------ ----------------- --
------
--
--------
--
----- ----------------- - -- ------- -- -- -
------------- -- --------- --------------
--
----- ------------------ - -- ------- -- -- -
-------------- -- ---------- --------------
--
----- ----------------- - -- ------- -- -- -
------------- -- --------- --------------
--在上面的代码中，我们通过 Media 组件包装了要渲染的组件，并将查询结果（matches）作为 props 传递给了每个组件。组件检查自身所需的查询是否匹配，并仅渲染当查询结果为 true 时。
总结
React-Media 是一个很实用和好用的库，它可以帮助你轻松实现响应式设计，并且你还可以使用它来提高你的页面性能。希望这个简短的教程能帮助你更好地理解和使用这个库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/204256