React+MUI中根据prop切换变量值渲染组件的写法是否正确

你当前的写法在vertical prop仅传入一次、不会动态变更的场景下能勉强实现效果，但存在明显缺陷，不是推荐的实现方式。

现有写法的问题 #

• 存在逻辑bug：你的useEffect只处理了vertical为true的分支，如果父组件动态将vertical从true改回false，所有状态值不会回退到默认横屏配置，会一直保持竖屏参数，和预期效果不符。
• 存在无意义的重渲染：组件首次渲染时会先使用state的默认值渲染第一帧，等useEffect执行完成后再更新状态触发第二次重渲染，带来不必要的性能开销，极端场景下还可能出现样式闪烁。
• 可维护性差：样式配置散落在state初始值、useEffect判断逻辑两个位置，后续如果要调整参数或者新增第三种展示模式，需要修改多处代码，容易漏改。

更优实现方案 #

这类完全由props推导出来的值不需要用state存储，也不需要用useEffect监听更新，直接在组件渲染阶段根据prop计算派生值即可，代码更简洁也没有上述问题：

// 可以把固定配置提到组件外部，避免每次渲染重新创建对象
const AD_BANNER_CONFIG = {
  horizontal: {
    width: "100%",
    height: "90px",
    spacing: 2,
    direction: "row"
  },
  vertical: {
    width: "320px",
    height: "480px",
    spacing: 5,
    direction: "column"
  }
}

export default function AdBanner({ vertical = false }) {
  // 直接根据传入的prop选择对应配置，不需要额外的状态和副作用
  const currentAdStyle = vertical ? AD_BANNER_CONFIG.vertical : AD_BANNER_CONFIG.horizontal

  return (
    <>
      <Paper
        variant="outlined"
        sx={{ 
          width: { xs: "100%", md: currentAdStyle.width }, 
          height: currentAdStyle.height,
          // 后续用到spacing、direction的位置直接取currentAdStyle的对应属性即可
          overflow: "hidden"
        }}
      >
        {/* 组件其余内容 */}
      </Paper>
    </>
  )
}

方案优势 #

• 没有逻辑漏洞：不管vertical prop怎么动态变化，渲染时都会直接取对应配置，不会出现状态不回退的问题。
• 没有额外重渲染：不需要等副作用执行更新状态，首次渲染就直接使用正确的样式参数，不会有闪烁问题，性能更好。
• 易维护：所有样式配置统一收敛在AD_BANNER_CONFIG对象里，后续调整参数、新增展示变体只需要修改这个配置对象和取值逻辑即可，代码结构更清晰。

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