在Materialize+React中用显示/隐藏实现Div重排是否为不良实践？

嘿，我来帮你优化这个点赞视频列表的布局问题～

首先得说，你当前用两个列表加显示隐藏的思路是能实现需求，但其实存在不少可以优化的地方：比如重复的DOM节点会增加页面加载负担，后续维护时还要同步两处的列表内容，很容易出错，甚至可能被搜索引擎判定为冗余内容影响SEO。

给你两个更优的方案，看你需求选：

方案一：纯CSS媒体查询（强烈推荐） #

完全不需要JS，靠CSS布局就能实现响应式位置切换，简洁又高效。核心思路是用flex/grid布局，通过媒体查询调整容器的排列方式：

<!-- 只需要一个列表容器 -->
<div class="video-page-wrapper">
  <!-- 主视频展示区 -->
  <section class="main-video-area">
    <!-- 主视频、播放控件等内容 -->
  </section>
  <!-- 已点赞视频列表 -->
  <aside class="liked-videos-list">
    <!-- 列表项内容 -->
  </aside>
</div>

.video-page-wrapper {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap; /* 允许小屏幕时自动换行 */
  padding: 1rem;
}

/* 主视频区：大屏幕时占剩余宽度，小屏幕时占满整行 */
.main-video-area {
  flex: 1 1 450px;
}

/* 点赞列表：大屏幕时固定宽度，小屏幕时占满整行 */
.liked-videos-list {
  flex: 0 0 320px;
}

/* 小屏幕断点（比如你设置的600px） */
@media (max-width: 600px) {
  .liked-videos-list {
    flex: 1 1 100%;
  }
}

这种方式完全靠CSS布局规则实现位置切换，没有冗余DOM，维护成本极低，是响应式布局的首选方案。

方案二：JS动态移动DOM元素（适合特殊场景） #

如果因为某些业务限制必须用JS控制，那也不用放两个列表，只需要一个列表容器，通过JS监听窗口尺寸变化，动态把它移动到不同的父容器里就行：

<!-- 大屏幕时的父容器 -->
<div class="desktop-sidebar-container"></div>

<!-- 主视频区 -->
<section class="main-video-area">
  <!-- 主视频内容 -->
</section>

<!-- 小屏幕时的父容器 -->
<div class="mobile-bottom-container"></div>

<!-- 唯一的点赞列表 -->
<div id="likedVideosList" class="liked-videos-list">
  <!-- 列表项内容 -->
</div>

const likedList = document.getElementById('likedVideosList');
const desktopContainer = document.querySelector('.desktop-sidebar-container');
const mobileContainer = document.querySelector('.mobile-bottom-container');

// 定义移动列表的逻辑
function adjustListPosition() {
  const isLargeScreen = window.innerWidth > 600;
  const targetContainer = isLargeScreen ? desktopContainer : mobileContainer;
  
  // 只有当前容器不是目标容器时才移动，避免重复操作
  if (likedList.parentElement !== targetContainer) {
    targetContainer.appendChild(likedList);
  }
}

// 页面加载时先执行一次
adjustListPosition();

// 监听窗口 resize，加防抖避免频繁触发
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(adjustListPosition, 200);
});

这种方式只维护一个DOM节点，避免了内容重复，性能比你当前的方案好很多。

总结一下，优先选纯CSS方案，除非有特殊的交互需求必须用JS来控制布局～

内容的提问来源于stack exchange，提问作者user87324