React无限滚动消息组件重渲染导致Div重叠问题求助

我帮你梳理并完善这个React无限滚动消息组件的实现方案，结合你给出的核心逻辑，完整的实现思路和代码如下：

核心组件结构与完整代码 #

import { useState, useEffect, useRef } from 'react';

const InfiniteScrollMessages = () => {
  // 维护消息列表状态
  const [messages, setMessages] = useState([]);
  // 记录加载状态，防止重复触发请求
  const [isLoading, setIsLoading] = useState(false);
  // 获取滚动容器的DOM引用
  const messageContainerRef = useRef(null);

  // 初始化加载20条模拟消息
  useEffect(() => {
    const initialMessages = Array.from({ length: 20 }, (_, index) => ({
      id: 20 - index,
      content: `消息内容 ${20 - index}`
    }));
    setMessages(initialMessages);
  }, []);

  // 监听滚动容器的滚动事件
  useEffect(() => {
    const container = messageContainerRef.current;
    if (!container) return;

    const handleScroll = () => {
      // 当滚动到顶部，且不在加载状态时，触发旧消息加载
      if (container.scrollTop === 0 && !isLoading) {
        fetchNewMessages();
      }
    };

    container.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听
    return () => container.removeEventListener('scroll', handleScroll);
  }, [messages, isLoading]);

  // 补全你给出的旧消息获取逻辑
  const fetchNewMessages = async () => {
    setIsLoading(true);
    try {
      if (!messages.length) return;
      // 取当前列表中最旧的消息ID（假设ID越小消息越旧）
      const lastMessageId = messages[messages.length - 1].id;
      const newStartId = lastMessageId - 20;
      
      // 模拟异步请求旧消息（实际场景替换为真实接口调用）
      await new Promise(resolve => setTimeout(resolve, 500));
      
      // 生成20条旧消息，过滤掉ID为负数的无效数据
      const newMessages = Array.from({ length: 20 }, (_, index) => ({
        id: newStartId + index,
        content: `旧消息内容 ${newStartId + index}`
      })).filter(msg => msg.id > 0);

      if (newMessages.length) {
        setMessages(prev => [...prev, ...newMessages]);
        // 加载完成后调整滚动位置，避免立即再次触发加载
        const container = messageContainerRef.current;
        if (container) {
          // 假设每条消息高度约50px，可根据实际样式调整
          container.scrollTop = newMessages.length * 50;
        }
      }
    } catch (error) {
      console.error('加载旧消息失败:', error);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div
      ref={messageContainerRef}
      style={{
        height: '600px',
        overflowY: 'auto',
        border: '1px solid #eee',
        padding: '10px'
      }}
    >
      {/* 加载中提示 */}
      {isLoading && (
        <div style={{ textAlign: 'center', padding: '10px', color: '#666' }}>
          加载更多旧消息...
        </div>
      )}
      {/* 反转数组，让最新消息显示在顶部（符合聊天类应用习惯） */}
      {[...messages].reverse().map(msg => (
        <div
          key={msg.id}
          style={{
            padding: '15px',
            borderBottom: '1px solid #f0f0f0',
            marginBottom: '8px',
            backgroundColor: '#fafafa'
          }}
        >
          <div><strong>ID: {msg.id}</strong></div>
          <div>{msg.content}</div>
        </div>
      ))}
    </div>
  );
};

export default InfiniteScrollMessages;

关键实现细节解析 #

• 滚动触发逻辑：通过监听容器的scroll事件，判断scrollTop === 0时触发旧消息加载，这是用户向上滚动查看历史消息的典型场景
• 加载状态控制：加入isLoading状态，避免滚动时重复触发请求，提升用户体验
• 滚动位置调整：加载旧消息后手动设置scrollTop，防止内容变长后scrollTop仍为0，导致无限循环加载
• 消息排序处理：渲染时反转消息数组，让最新消息显示在顶部，符合大多数聊天类应用的交互习惯

优化建议 #

• 节流处理：可以给滚动事件添加节流（比如使用lodash.throttle），减少事件触发频率，提升性能
• 边界判断：可以添加消息耗尽的提示，当没有更多旧消息时，显示“已加载全部消息”
• 性能优化：如果消息数量极大，可以考虑使用虚拟滚动库（如react-window），避免DOM节点过多导致的性能问题

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