分页加载 + 虚拟列表加载不定元素高度长列表实现 - chatX

const [visibleMessages, setVisibleMessages] = useState<WebSocketMessage[]>([]); // 需要渲染的元素
const itemHeight = 70; // 每个元素的默认高度 渲染时会替换为实际高度
const totalHeight = useRef<number>(0); // 外部容器总高度 因为元素高度不定 需要实时更新
const heightCache = useRef<{ [id: number]: number }>({}); // 高度缓存 存储每个元素ref的实际DOM高度
const itemOffset = useRef<{ [id: number]: number }>({}); // scrollTop缓存 用于设置元素的top值

/**
 * 更新单个元素的高度 然后更新所有元素的Offset
 */
const updateHeight = (id: number, height: number) => {
  if (heightCache.current[id] === height) return;
  heightCache.current[id] = height;

  let prefix = 0;
  for (let i = messages.length - 1; i >= 0; i--) { // 反向 因为消息从下至上
    const msgid = messages[i].id;
    itemOffset.current[msgid] = prefix;
    prefix += heightCache.current[msgid] || itemHeight;
  }

  totalHeight.current = prefix;
  calcVisibleMessages(); /** 更新完高度后需要重新计算 & 渲染可视列表 */
};

/**
 * 计算视窗内应该有的元素
 */
const calcVisibleMessages = () => {
  if (!containerRef.current) return;
  const scrollTop = -containerRef.current.scrollTop; // 负数 因为列对齐是反向 顶部变为底部

  const containerHeight = containerRef.current.clientHeight || 500;
  let startIndex = 0,
    endIndex = 0,
    currentOffset = 0;

  /**
   * 前缀offset + 当前消息高度 小于 滚动条距离顶部高度
   */
  while (
    startIndex < messages.length - 1 &&
    currentOffset + (heightCache.current[messages[startIndex].id] || itemHeight) < scrollTop
  ) {
    currentOffset += heightCache.current[messages[startIndex].id] || 0;
    startIndex++;
  }

  /**
   * 前缀offset 小于滚动条距离顶部高度 + 窗口高度
   */
  endIndex = startIndex;
  while (endIndex < messages.length && currentOffset < scrollTop + containerHeight) {
    currentOffset += heightCache.current[messages[endIndex].id] || 0;
    endIndex++;
  }
  
  /**
   * 多渲染两个头尾 避免白屏观感不好
   */
  startIndex = Math.max(0, startIndex - 2);
  endIndex = Math.min(messages.length - 1, endIndex + 2);

  setVisibleMessages(messages.slice(startIndex, endIndex + 1));
};

/**
 * 渲染出上面计算出的元素
 */
const renderMessageItem = (message: WebSocketMessage): ReactNode => {
  const offset = itemOffset.current[message.id];
  return (
    <div
      key={message.id}
      /**
       * ref里的函数会在组件挂载 ｜ 更新时执行 获取它的高度并执行更新函数
       */
      ref={el => {
        if (!el) return;
        // 测量实际高度
        const height = el.getBoundingClientRect()?.height;
        updateHeight(message.id, height);
      }}
      style={{
        position: 'absolute',
        top: `${offset}px`,
        width: '100%',
      }}
    >
      <MessageItem message={message.text!} isSelf={message.sender === username} timestamp={message.timestamp} />
    </div>
  );
};