reactjs - 带显示的响应式处理：无

Question

我试图了解将 css 属性display: none与媒体查询一起使用是否是一种在移动设备和桌面设备之间显示不同布局的安全方法。我正在为我的前端使用reactand material-ui，并且随着我的布局变得更加复杂，我发现将display属性设置为none是一种“简单”的方法来显示各种屏幕尺寸的特定布局。

关于 SSR，我认为这比使用useMediaQuery挂钩更安全。我知道我可能会放弃性能，因为无论屏幕大小如何，渲染时都会调用移动和桌面组件。

除了性能（和使用基于类的组件）之外，我是否应该考虑其他任何东西作为这种方法的潜在缺陷？

import React from 'react';
import { withStyles } from '@material-ui/core';
import Mobile from './components/Mobile';
import Desktop from './components/Desktop';


const styles = theme => ({
  hideOnMobile: {
    // max-width media query between 0 and md
    [theme.breakpoints.down('sm')]: {
      display: 'none'
    }
  },
  hideOnDesktop: {
    // min-width media query from md and up
   [theme.breakpoints.up('md')]: {
      display: 'none'
    }
  }
});


class ResponsiveComponent extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div>
        <div className={classes.hideOnMobile}>
          <Desktop />
        </div>
        <div className={classes.hideOnDesktop}>
          <Mobile />
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(ResponsiveComponent);

标签： reactjsmaterial-uiresponsivedisplay