React - responsive app - CSS経由でコンポーネント内の要素を隠すかレンダリングしないでください

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を表示/非表示にするだけで、コンポーネントは常にそこにマウントされます。いいえ、再レンダリングtho。

思考？

Answer 1

私はこれがただのCSSの仕事かもしれないことに同意します。

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

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

Answer 2

私はそれが達成しようとしているものによって異なると思います。クリティカルパスのCSS抽出によるユニバーサルなレンダリングがあり、ミリ秒を削る場合、反応のみのソリューションが必要です。さもなければ、あなただけのおそらく再レンダリングされているので、CSSだけの解決策は、反応だけのソリューションと同様に同様に同様に行うでしょう。その卑劣なisMobileはちょうどあなたのコードベースのどこかでレンダリングを引き起こしました（または将来的には）。プラス、あなたはその反応提案の拡張性を失ったばかりです。