Question

如果我要使用媒体查询来更改布局并将移动中的某些组件（例如常规html和css）的显示设置为“无”，还是要以实际的方式进行而不使用，我想使用react创建一个响应式网站不会渲染该组件，而不是不使用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（）更好。

Answer 1

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

关于您的特定示例，最好使用React来切换元素的存在，而不是应用类来切换display属性。我这样做的原因是，这两个操作都需要DOM操作（React必须添加list元素，或者必须更新className值）。使用CSS类切换显示内容还具有第二项任务，即应用新的display值，这将导致内容的另一次重排。

反应解决方案：：更新DOM以插入新节点。
CSS解决方案：：更新DOM以添加className。根据新的显示属性重排内容。

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

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

Answer 2

如果可以使用CSS进行操作，请始终使用CSS。就加载和渲染而言，JS比CSS昂贵。根据您的要求，您需要根据加载的设备更改布局。因此，可以在不使用JS的情况下使用媒体查询和CSS网格来做到这一点。引用是获取DOM元素的反应方式。因此，请使用它而不是使用诸如document.getElementById（）之类的方法。

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

2 个答案: