React - 响应式应用程序 - 更好地通过 CSS 隐藏组件中的元素或不渲染它答案

【问题标题】：React - responsive app - better to hide element in component via CSS or not render itReact - 响应式应用程序 - 更好地通过 CSS 隐藏组件中的元素或不渲染它
【发布时间】：2017-05-17 21:49:36
【问题描述】：

我目前正在开发基于 React.js 的应用程序。假设我们在 React 中有一个 Header 组件，其中有一个小徽标组件，它应该只以移动分辨率级别显示。我正在从父组件传递一个 isMobile 道具。该道具基于：

const mql = global.matchMedia(`(min-width: 768px)`);
mql.addListener(() => this._mediaQueryChanged());
this.setState({
  mql: mql,
  isMobile: !mql.matches
});

_mediaQueryChanged() {
  this.setState({
    isMobile: !this.state.mql.matches
  });
}


<Header isMobile={this.state.isMobile} />

在Header:

render() {
  const {isMobile} = this.props;
  const containerClass = classNames('header-component', {
    'is-mobile': isMobile
  });
  return (
    <header className={containerClass}>
      {
        isMobile && 
        (
          <section className="mobile-header">
            <Button className="toggle-menu" onClick={() => this._toggleMenu()}>
              <Icon name="menu" />
            </Button>
            <Logo className="header-logo" />
          </section>
        )
      }
      <span>login</span>
    </header>
  );
}

如果mql 匹配，则它不是移动的。我的问题是：每次我们更改媒体查询时，我是否应该传递这个参数并重新渲染组件？在重新渲染隐藏/显示徽标组件期间？或者只是使用 CSS 显示/隐藏它，组件将一直挂载在那里。没有重新渲染。

想法？

【问题讨论】：

我可能会使用 CSS 媒体查询，因为重新渲染视口大小的变化可能会很昂贵，尤其是在它不断变化的情况下。这也正是媒体查询的用途……根据视口的大小更改/显示/隐藏外观。

标签： css reactjs responsive-design media-queries

【解决方案1】：

我同意这可能只是 CSS 的工作。

.header-class .logo {
  display:none;
}

@media only screen and (min-width: 768px) {
    .header-class .logo {
      display:block;
    }
}

【讨论】：

【解决方案2】：

我认为这取决于您要达到的目标。如果您使用关键路径 CSS 提取进行通用渲染并尝试减少毫秒，请选择仅反应解决方案。否则，仅使用 css 的解决方案将与仅使用反应的解决方案一样好，因为您可能已经在重新渲染。那个鬼鬼祟祟的isMobile 刚刚触发了你代码库中其他地方的渲染（或者将来会）；另外，你刚刚失去了 react 提供的可扩展性。

【讨论】：