React中基于屏幕尺寸条件渲染组件：用State还是CSS更优？

CSS媒体查询方案优势 #

• 实现极简：纯CSS编写，无需任何JS逻辑，代码量少且易维护，新手也能快速上手
• 原生兼容性拉满：作为CSS3标准特性，所有现代浏览器甚至部分旧版浏览器都支持，不需要额外兼容处理
• 渲染性能最优：浏览器直接根据视口尺寸应用样式，完全不占用JS线程，避免了状态更新、DOM操作带来的开销
• 响应式行为更流畅：窗口 resize 时浏览器自动重算样式，不会出现JS监听的延迟或卡顿

React Hooks（useState+useEffect+事件监听）方案优势 #

• 交互控制更灵活：可以在视口尺寸变化时执行额外逻辑，比如触发过渡动画、加载适配数据，或者和其他组件的状态联动
• 状态可复用：可以把视口尺寸判断逻辑封装成自定义Hook，在多个组件中复用，统一管理响应式状态
• 精准管控DOM：可以在特定尺寸下彻底卸载不需要的DOM元素（而非CSS的display:none），减少页面DOM节点数量，极端场景下能优化渲染性能
• 支持复杂断点逻辑：如果需要结合设备类型、用户偏好等非视口条件做判断，JS方案能更灵活地组合逻辑

性能对比 #

• 常规场景：CSS方案完胜：没有JS执行、状态更新的开销，浏览器原生渲染路径效率更高，几乎没有性能损耗
• 极端复杂场景：JS方案可能占优：如果页面存在大量需要切换显示的DOM节点，JS卸载DOM的方式比CSS隐藏更节省内存，但这种场景非常少见，且需要额外的状态管理成本
• JS方案的潜在坑：resize事件如果不做防抖/节流处理，会频繁触发回调，导致页面卡顿；而CSS方案完全不存在这个问题

行业推荐实践 #

• 绝大多数场景优先选CSS媒体查询：这是响应式导航栏的通用最佳实践，简单高效，符合原生Web设计思路
• 仅在需要额外JS联动时用Hooks方案：比如视口变化时要触发动画、和其他组件状态交互、动态加载内容等场景
• 特殊场景可结合使用：如果担心DOM节点过多，可以在CSS控制显示的基础上，用JS在极端尺寸下卸载DOM，但这种需求极少出现

内容的提问来源于stack exchange，提问作者Cloud