React响应式开发：useState条件渲染与CSS媒体查询该选哪种？

各方案优缺点分析 #

1. React事件监听+多return语句 #

• 问题：将布局切换逻辑嵌入JS，与UI渲染强耦合；每个组件重复编写监听逻辑，代码冗余；断点尺寸分散在组件内，后续修改需逐一排查，极易混乱；且JS监听的断点易与CSS媒体查询不一致，导致样式和组件切换不同步。
• 适用场景：仅在必须根据屏幕尺寸彻底替换组件结构且无通用Hook可复用的极端场景临时使用，不推荐长期维护。

2. CSS媒体查询 #

• 优势：符合原生Web规范，样式逻辑与JS彻底分离；浏览器原生支持，性能开销极低；断点和样式集中在CSS文件，维护成本低。
• 局限：无法直接控制组件结构切换（比如移动端用完全不同的组件），只能处理样式变化。
• 适用场景：绝大多数仅需调整样式的响应式需求，是首选方案。

3. useState+条件className #

• 优势：兼顾样式控制与组件结构调整的能力；样式仍集中在CSS，保持关注点分离。
• 问题：若断点尺寸在JS和CSS中分别定义，极易出现不一致；每个组件重复写状态逻辑，代码冗余。
• 适用场景：需要结合样式和组件结构切换的场景，但需解决断点同步问题。

最优方案与通用可维护性解决思路 #

核心原则：集中管理断点+复用逻辑 #

无论选择哪种方案，都要避免断点尺寸分散在多个文件或组件中，这是防止未来代码混乱的关键。

1. 纯样式变化：优先使用CSS媒体查询+全局断点变量

将所有断点尺寸定义在全局CSS的变量中，所有组件的CSS文件复用这些变量：

/* global.css */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
}

/* 组件独立CSS文件 */
.your-component {
  /* 默认样式 */
}

@media (max-width: var(--breakpoint-sm)) {
  .your-component {
    /* 移动端样式 */
  }
}

@media (min-width: var(--breakpoint-md)) {
  .your-component {
    /* 平板及以上样式 */
  }
}

后续修改断点只需更新:root中的变量，所有组件的媒体查询会自动同步。

2. 需要组件结构切换：封装断点检测Hook+集中配置

编写一个通用的useBreakpoint Hook，将断点检测逻辑封装复用，同时与CSS的全局断点保持一致：

// hooks/useBreakpoint.js
import { useState, useEffect } from 'react';

// 与CSS全局变量一致的断点配置
const BREAKPOINTS = {
  sm: 576,
  md: 768,
  lg: 992,
};

export const useBreakpoint = () => {
  const [currentBreakpoint, setCurrentBreakpoint] = useState('lg');

  useEffect(() => {
    const updateBreakpoint = () => {
      const width = window.innerWidth;
      if (width < BREAKPOINTS.sm) {
        setCurrentBreakpoint('sm');
      } else if (width < BREAKPOINTS.md) {
        setCurrentBreakpoint('md');
      } else {
        setCurrentBreakpoint('lg');
      }
    };

    // 初始化检测+监听窗口变化
    updateBreakpoint();
    window.addEventListener('resize', updateBreakpoint);
    return () => window.removeEventListener('resize', updateBreakpoint);
  }, []);

  return currentBreakpoint;
};

然后在组件中复用该Hook，避免重复逻辑：

const Comp = () => {
  const breakpoint = useBreakpoint();

  if (breakpoint === 'sm') {
    return <SmallComponent />;
  }
  return <BigComponent />;
};

这种方式既保证了JS与CSS断点的一致性，又避免了每个组件重复写监听逻辑，后续修改断点只需调整BREAKPOINTS对象和CSS全局变量即可。

对你现有代码的修正 #

你当前的代码存在条件判断逻辑错误（两个if都判断size === ''），且未封装监听逻辑，建议替换为上述Hook方案，减少冗余代码并提升可维护性。

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