React 中的响应式设计答案

【问题标题】：Responsive design in ReactReact 中的响应式设计
【发布时间】：2020-02-26 21:31:39
【问题描述】：

我正在寻找一些关于在今天构建完全响应式 React 应用程序时使用哪些库、组件和方法的建议？

我应该基于钩子还是老式媒体查询？也许在某个地方有更好的解决方案？

【问题讨论】：

【解决方案1】：

我建议使用组件库，对于最新的组件，响应式组件库，例如 rsuitejs 或材料设计组件应该就可以了。

链接：

【讨论】：

【解决方案2】：

看看Antd或material-ui

或者你可以使用常规的 CSS 和样式你的组件（我最喜欢的方式）

【讨论】：

【解决方案3】：

与其他人提到的一样，有很多包用于响应式设计 - CSS 框架、React 组件库等。使用 flexbox 和/或网格也很容易实现.

就以 React 为中心的方法而言，这是一种非常有效的方法。它假定您正在使用 SSR。

使用上下文 API 创建断点提供程序组件。它的工作是跟踪当前断点，并监听调整大小事件以根据需要更改状态。在构造函数中，接受默认视口大小。这可以通过利用用户代理嗅探在服务器端填充。
使用断点上下文中的消费者来显示当前视口大小。这可用于基于视口有条件地加载组件，而不是渲染它们，然后使用带有媒体查询的 CSS 隐藏它们。通过这种方式，您发送的 CSS/HTML 更少，处理 JS 和 CSS 的时间更少，而且对于较大的网站，它可以大大缩短加载时间。 :)

【讨论】：

这是否适用于带有 useInitialProps 的 NextJS SSR 页面？我遇到了需要动态导入页面或组件的情况，因为 SSR 无法使用 .window。
@lakerskill 这样的东西应该很好用：``` static async getInitialProps({ ctx }) { const userAgentHeader = ctx.req.headers['user-agent'];返回 { userAgentHeader }; } ```
@lakerskill 也不确定该评论是否有助于解决您的问题，我以为您在询问如何使用 nextjs 将用户代理标头传递给断点组件，但如果您只是遇到问题通常在组件中访问窗口您可以只在 componentDidMount 中访问窗口，以确保我们在客户端而不是服务器上运行...希望对您有所帮助！
欣赏它。我得试试看。

【解决方案4】：

我刚刚发现了一个小型 npm 包，它为断点实现了 Provider 和 Consumer。基本上adamz4008暴露的想法：

我试过了，很简单。另外，与使用更大的东西作为 material-ui 或 antd 相比，它似乎是最轻的选择（这很好，但如果您不使用它们的组件或者如果您已经在使用一些没有断点的组件库，那将是一种矫枉过正）。

还有一个非常简单的使用教程here

作为一个超级快速的“元示例”，您可以使用它的BreakpointProvider 来包装您的 React 应用程序组件（最顶层），然后在被包装组件的任何子组件中，您可以使用 Breakpoint 组件来执行以下操作：

<>
  <Breakpoint small down>
    <MySmallComponent />
  </Breakpoint>
  <Breakpoint medium up>
    <MyBigComponent />
  </Breakpoint>
</>

“small”是提供的五个自定义断点之一。 “下”的意思是，这个，或者更小。类似的逻辑适用于“中”和“上”，意思是“中等或更大的屏幕”。

如果你想自己实现这个，你应该在 resize 事件上做一个带有监听器的提供者组件。当您在 google 上搜索“响应性 + 反应”时，您可以找到很多示例，但 here 是这个社区的一个 :)（查看 speckledcarp 的答案）

【讨论】：