Question

我目前正在开发基于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来显示/隐藏它，组件将一直安装在那里。没有重新渲染。

思想？

Answer 1

我认为这取决于你想要实现的目标。如果您使用关键路径CSS提取进行通用渲染并尝试削减毫秒数，那么请选择仅反应解决方案。否则，仅css解决方案将与仅反应解决方案同样有效，因为您已经可能重新渲染。那个鬼鬼祟祟的isMobile刚刚在你的代码库中的某个地方触发了渲染（或将来会发生）;而且，你刚刚失去了反应优惠的可扩展性。

Answer 2

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

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

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

反应敏感的应用程序 - 更好地通过CSS隐藏组件中的元素或不渲染它

2 个答案: