Javascript 考虑到性能和广告显示，如何使用React和样式化组件在2个响应标题（移动和桌面）之间切换？

以下是我的情况：我有两个头部组件，我需要在移动和桌面之间切换

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

• 小标志
• 按钮打开搜索栏
• 显示adsense广告的SideNav

---

我目前的做法

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

在

1200px

断点，我将它们的显示从

none

切换到

flex

，反之亦然（见下面的代码）。这正是我们想要的

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呈现的。我仍然可以在浏览器上检查这两个元素（参见下图）

这是完全有意义的，因为它们都存在，并且都是由它们的父组件

头

呈现的。唯一不让其中一个出现在屏幕上的是带有

display:none

的CSS规则

这也可能被认为是一件好事，因为它们之间的切换非常快

我的问题

但是性能呢？

这是一种好的做法吗？我是说，我应该这样做吗？有没有其他更有效的方法？我的意思是，它们不是昂贵的部件，但如果它们是呢

广告展示怎么样？

如果我在

SideNav

上放置了一则仅在移动版上显示的广告，该怎么办？这不是个问题吗？该广告将在桌面版本上呈现，但会对用户隐藏

我的意思是，但我用的是另一个没有的广告合作伙伴

---

首先：如果您的导航栏功能过重，将损害您的性能。 您可以通过为桌面创建hoc（高阶组件）和为移动设备创建hoc（或获取范围的动态hoc属性）来解决此问题，该属性仅在屏幕宽度合适时才会渲染子组件

第二：在谷歌Adsense上，这是一项反对的政策！您的帐户可能会被阻止。

---

我想大多数广告服务也是如此。

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

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

{window.innerWidth>1200？：}

这样，一次只能得到一个组件。您不需要任何

css