反应媒体和反应响应之间的区别

Difference between react-media and react-responsive

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

两者看起来非常相似,既没有提到彼此的区别,也没有提到一个特别糟糕而另一个更好的用例。

有人知道主要区别吗?

通常它们都提供相同的功能,但它们有不同的维护者和实现 reactTraining maintains react-media while contra maintains react-responsive 这就像两个竞争方使用相同的产品,您可以选择使用哪个,一些细微的差异已经指出。

  1. react-media 没有 specify/limit react-media 中子组件的数量,而 react-responsive 指定一个多于一个被包裹在 diff 中
  2. react-media render 属性 是一个在媒体查询匹配时被 returned 的函数,而 react-reponsive 支持传递布尔值的函数 returns true为 false 媒体查询通过并且其 return 类型是单个元素
  3. react-responsive 支持驼峰简写 maxWidth={1224} 来构建媒体查询,而 react-media 不支持 query={{ maxWidth: 1224 }}
  4. react-media 可以接受转换为 css 媒体查询的对象query={{ maxWidth: 599 }},而 react-responsive 则不能
  5. react-responsive 支持服务器端渲染,这是通过将静态值传递给值 属性
  6. 来实现的

最重要的是,它们似乎都适合内部媒体查询,反应只是一个选择问题