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

Question

这是我的情况:我有 2 个 Header 组件，我需要在移动设备和桌面设备之间切换。

<HeaderDesktop>

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

<HeaderMobile>

• 较小的 Logo
• 打开搜索栏的按钮
• 显示 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 渲染的。我仍然可以在浏览器上检查这两个元素(见下图)。

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

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

我的问题

但是性能呢？

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

广告展示怎么样？

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

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

Answer 1

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

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

通过这种方式，您一次只能获得一个组件。并且您不需要任何 css。