javascript - 使用显示/隐藏通过 materliaze + react 重新排序 div 是个坏主意吗？

Question

我正在从事一个元素，该元素需要在主视频显示旁边显示一个喜欢的视频列表(类似于 youtube 的相关视频列表)。但是，在较小的屏幕尺寸上，我需要在视频和其他几个元素下方呈现列表。目前，我的解决方案是将列表放在两个位置，并有一个根据屏幕大小显示/隐藏的变量:

    function determinePageSize() {
  if (window.innerWidth > 600) {
    return {
      largeOnlyContainer: "container",
      size: "desktop"
    };
  } else {
    return { size: "mobile", hideOnMiblie: "hide" };
  }
}

然后这是我要渲染的内容:

<div style={{ position: "relative" }} class={`${responsiveVariables.hideOnMobile} container`}>
              <div style={{ position: "absolute", left: "-20rem", width: "20rem" }} class={`${this.props.favoriteGifs.length > 0 ? "show" : "hide"} collection`}>
                <a style={{ cursor: "pointer" }} onClick={this.handleHideFavorites} class="collection-item">
                  <span class="deep-purple-text text-darken-1">
                    Favorites
                  </span>

                  <span class="secondary-content" onmouseover="">
                    <i class="deep-purple-text text-darken-1 material-icons">
                      arrow_drop_down
                    </i>
                  </span>
                </a>
                <div
                  className={
                    this.state.collectionVisibility ? "show" : "hide"
                  }
                >
                  {createCollection(
                    this.props,
                    this.props.deleteGif.bind(this, this.props.favoriteGifs)
                  )}
                </div>
              </div>
            </div>

通过将这段代码放在两个地方并使用显示/隐藏它会起作用，但是，我想知道是否有更好的方法或者是否存在我应该注意的性能问题。 “createCollection”函数从 redux 存储中抓取喜欢的视频，然后创建一个列表组件数组。是否值得传递一个参数以便它只在一个地方被调用，或者创建一个函数来负责创建上面 div 中包含的所有内容并让它根据作为参数传入的屏幕尺寸只运行一次。这些方法中的一种是否有效，或者我应该尝试使用 CSS 和媒体查询找到解决方案？

Answer 1

如果您确保仅调用一次 createCollection 并且视频列表的大小合理(不超过 1000 个)，您的方法应该尤其有效。
真正的问题是关于 determinePageSize。我希望更多功能取决于窗口大小，如果您愿意以类似的方式解决所有这些问题，而不是 ok。
但是如果有更多的开发人员在同一个元素上工作，也许最好坚持使用媒体查询等标准解决方案来减轻认知负担(我希望任何体面的开发人员都会熟悉媒体查询，但要了解 size 是什么: "mobile" 意味着他们必须理解 determinePageSize 。