时间戳

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

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

问题描述

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

<HeaderDesktop>

<HeaderMobile>

我目前的做法

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

在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.

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

我的问题

但是性能呢？

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

广告展示呢？

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

我的意思是，Google adsense 也有办法让广告负责，但我正在使用另一个没有的广告合作伙伴？

在此处输入图像描述

标签： javascriptcssreactjsstyled-components

解决方案

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

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

推荐阅读