反应媒体和反应响应之间的区别
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 这就像两个竞争方使用相同的产品,您可以选择使用哪个,一些细微的差异已经指出。
- react-media 没有 specify/limit react-media 中子组件的数量,而 react-responsive 指定一个多于一个被包裹在 diff 中
- react-media render 属性 是一个在媒体查询匹配时被 returned 的函数,而 react-reponsive 支持传递布尔值的函数 returns true为 false 媒体查询通过并且其 return 类型是单个元素
- react-responsive 支持驼峰简写
maxWidth={1224}
来构建媒体查询,而 react-media 不支持 query={{ maxWidth: 1224 }}
- react-media 可以接受转换为 css 媒体查询的对象
query={{ maxWidth: 599 }}
,而 react-responsive 则不能
- 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 这就像两个竞争方使用相同的产品,您可以选择使用哪个,一些细微的差异已经指出。
- react-media 没有 specify/limit react-media 中子组件的数量,而 react-responsive 指定一个多于一个被包裹在 diff 中
- react-media render 属性 是一个在媒体查询匹配时被 returned 的函数,而 react-reponsive 支持传递布尔值的函数 returns true为 false 媒体查询通过并且其 return 类型是单个元素
- react-responsive 支持驼峰简写
maxWidth={1224}
来构建媒体查询,而 react-media 不支持query={{ maxWidth: 1224 }}
- react-media 可以接受转换为 css 媒体查询的对象
query={{ maxWidth: 599 }}
,而 react-responsive 则不能 - react-responsive 支持服务器端渲染,这是通过将静态值传递给值 属性 来实现的
最重要的是,它们似乎都适合内部媒体查询,反应只是一个选择问题