反应介质和反应响应之间的差异

时间:2017-07-19 20:48:27

标签: reactjs responsive-design responsive

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

两者似乎非常相似,既没有提到与另一方的差异,也没有提到一个特别糟糕而另一个特别糟糕的情况。

有人知道关键差异吗?

1 个答案:

答案 0 :(得分:8)

一般来说,它们都提供相同的功能,但是它们有不同的维护者和实现reactTraining维护react-mediacontra维护react-responsive就像两个竞争的一方拥有相同的产品选择哪一个使用了一些微小的差异已经注意到了。

  1. react-media不指定/限制react-media内部子组件的数量,而react-responsive指定一个以上的组件包含在diff中
  2. react-media呈现属性是匹配媒体查询时返回的函数,而react-reponsive支持传递的函数boolean value返回false,媒体查询传递为false,返回类型为单个元素
  3. react-responsive支持camelcased shorthands maxWidth={1224}构建媒体查询,而react-media不query={{ maxWidth: 1224 }}
  4. react-media可以接受转换为css媒体查询query={{ maxWidth: 599 }}的对象,而响应响应不会
  5. react-responsive支持服务器端呈现,这是通过将值传递给values属性
  6. 来实现的

    在底线,他们似乎都很好,内部的媒体查询反应只是一个选择问题