react-media 和 react-responsive 的区别答案

【问题标题】：Difference between react-media and react-responsivereact-media 和 react-responsive 的区别
【发布时间】：2017-12-25 07:48:20
【问题描述】：

我开始考虑在我的 react 应用中有条件地渲染组件。我遇到了 react-media (https://github.com/ReactTraining/react-media) 和 react-responsive (https://github.com/contra/react-responsive)。

两者似乎非常相似，都没有提及彼此的差异，也没有提到一个特别糟糕而另一个更好的用例。

有人知道主要区别吗？

【问题讨论】：

【解决方案1】：

一般来说，它们都提供相同的功能，但它们有不同的维护者和实现 reactTraining 维护 react-media 而 contra 维护 react-responsive 就像两个具有相同产品的竞争方，您可以选择使用哪一些关闭已经注意到的细微差别是。

react-media 没有指定/限制 react-media 中子组件的数量，而 react-responsive 指定一个多于一个被包装在一个差异中
react-media 渲染属性是当媒体查询匹配时返回的函数，而 react-reponsive 支持传递布尔值的函数，该函数返回 true 或 false 传递的媒体查询，其返回类型是单个元素李>
react-responsive 支持驼峰式简写 maxWidth={1224} 来构造媒体查询，而 react-media 不支持 query={{ maxWidth: 1224 }}
react-media 可以接受转换为 css 媒体查询的对象query={{ maxWidth: 599 }}，而 react-responsive 则不能
react-responsive 支持服务器端渲染，这是通过将静态值传递给 values 属性来实现的

归根结底，它们似乎都适合媒体查询，而反应只是选择问题

【讨论】：