我应该使用媒体查询进行响应式设计吗？

Posted 2023-03-06

【中文标题】我应该使用媒体查询进行响应式设计吗？

【英文标题】：should i use media queries for responsive design with react?

【发布时间】：2019-10-28 00:48:54

【问题描述】：

我想使用 react 制作一个响应式网站，我应该使用媒体查询来更改布局并将移动设备中某些组件（如常规 html 和 css）的显示设置为“无”，还是在反应中进行而不是' t 渲染该组件而不是不使用 css 显示它？

例如，对于菜单，如果用户单击菜单按钮，则将菜单的显示属性从“无”更改为“阻止”

<ul id="menu">
    <li>one</li>
    <li>one</li>
</ul>

在 DOM 节点的 classList 中切换“打开”

在css中

.menu li 
    display: none;


.menu.open li 
    display: block;

或者像这样， 使用状态，如果用户单击菜单按钮，则更改状态并做出反应以呈现菜单

[open,setOpen] = useState(false);

open?<Menu />:'';

哪一个是更好的方法？推荐哪一个

还有一个问题，在 react 中使用 'refs' 访问 DOM 节点比使用传统的 document.getElementById() 更好？

【问题讨论】：

从概念上讲，最好只创建您实际使用的组件...我会让您的应用在全球范围内知道它是在移动视图还是桌面视图中，然后根据该变量构建应用程序。跨度>

【参考方案1】：

我最初的反应是，您可能没有构建任何绝对需要最高性能解决方案的东西，因此从长远来看，通过 CSS 隐藏元素与通过 React 从 DOM 中消除元素并没有多大关系。我的建议是尽你所能完成你的项目，然后在你的用例允许的情况下担心性能。

关于您的具体示例，最好只使用 React 切换元素的存在，而不是应用一个类来切换 display 属性。我的理由是因为这两个操作都需要 DOM 操作（React 必须要么添加列表元素，要么必须更新 className 值）。使用 CSS 类来切换显示还有一个次要任务，即应用新的 display 值，这会导致内容再次重排。

React 解决方案： 更新 DOM 以插入新节点。CSS 解决方案： 更新 DOM 以添加 className。基于新的显示属性重排内容。

关于你关于 $refs 的第二个问题...

使用 $refs 会比 document.getElementById 更好。 $refs 对象维护对需要操作的 HTML 节点的内存引用。 document.getElementById 将需要遍历 DOM 树来查找元素，而使用 $refs 只需通过命名属性查找节点。

【讨论】：

谢谢你的回答，是的，这是一个简单的例子，但是如果我想为图像幻灯片或视频之类的东西做这件事呢？

您修改后的问题取决于浏览器。如果将元素设置为display: none，浏览器可能会或可能不会开始加载元素，因此通过在隐藏时加载资产可能获得的任何性能优势可能不适用于用户正在使用的浏览器。 IMO，我会在 javascript 中预加载资产，并在加载时使用 React 显示占位符元素，然后在加载完成或缓冲足够时切换到资产。

【参考方案2】：

如果可以使用 CSS，请始终使用 CSS。 JS 在加载和渲染方面比 CSS 昂贵。根据您的要求，您需要根据加载的设备更改布局。所以使用媒体查询和 CSS 网格来做到这一点，而不使用 JS。 Refs 是获取 DOM 元素的反应方式。所以请使用它而不是使用像 document.getElementById() 这样的方法。