如何在使用 React 的 2 个响应式 headers（移动和桌面）和考虑性能和广告显示的 styled-components 之间切换？

Question

这是我的情况：我有 2 个 Header 组件，我需要切换 from/to 移动和桌面。

<HeaderDesktop>

徽标
搜索栏
带下拉菜单的水平导航栏

<HeaderMobile>

较小的徽标
用于打开搜索栏的按钮
带有 adsense 广告显示的 SideNav

我目前的方法

现在，我正在做的是在这两者之间切换：

在 1200px 断点处，我将它们的显示从 none 切换为 flex 和 vice-versa（请参见下面的代码）。这按预期工作。

HeaderDesktopDIV = styled.div`
  display: none; 

  @media only screen and (min-width: 1200px) {
    display: flex;
  }
`;

HeaderMobileDIV = styled.div`
  display: flex;

  @media only screen and (min-width: 1200px) {
    display: none;
  }
`;

我的担忧

我担心的是这两个组件都是由 React 渲染的。我仍然可以在浏览器上检查这两个元素（见下图）。

这是完全有道理的，因为它们都存在并且已由其 parent 组件 Header 呈现。唯一让其中之一不在屏幕上的是 CSS 规则 display: none.

这也算是一件好事，因为它们之间的切换非常快。

我的问题

但是性能呢？

这是一个好习惯吗？我的意思是，我应该这样做吗？还有另一种可能更有效的方法吗？我的意思是，它们不是昂贵的组件，但如果它们是呢？

广告展示怎么样？

如果我在 SideNav 上放置了只在移动版上显示的广告怎么办？不会有问题吗？该广告将在桌面版本上呈现，但会对用户隐藏。

我的意思是，Google adsense has a way of making the ads responsible too，但我使用的是另一个没有的广告合作伙伴？

Answer 1

第一：如果你有一个功能强大的导航栏，它会损害你的表现。您可以通过为桌面创建一个 hoc（高阶组件）和为移动设备创建一个 hoc（或获取范围属性的动态 hoc）来解决它，只有在屏幕宽度适合时才会呈现子组件。

其次：关于Google Adsense 是违反政策的！并且您的帐户可能会被阻止。我想大多数广告服务都是一样的。

Answer 2

这是我在组件之间切换的方法，

{window.innerWidth > 1200 ? <HeaderDesktop> : <HeaderMobile>}

这样你一次只能得到一个组件。而且您不需要任何 css。

如何在使用 React 的 2 个响应式 headers（移动和桌面）和考虑性能和广告显示的 styled-components 之间切换？

How to toggle between 2 responsive headers (mobile and desktop) using React and styled-components considering performance and advertisement displays?

javascript

css

reactjs

styled-components