React中如何判断DOM元素渲染完成并获取其尺寸？

当你在React中循环渲染大量元素（比如10k个<div>）时，普通的useEffect可能拿不到正确的DOM尺寸——因为此时元素可能还在渲染队列里，没真正挂载到DOM上。下面是几种靠谱的解决方法：

1. 用requestAnimationFrame配合useEffect #

浏览器的requestAnimationFrame会在下一次重绘前执行回调，这时候所有DOM渲染操作已经完成，能准确获取元素的位置和尺寸。

import { useEffect, useRef } from 'react';

function LargeList({ data }) {
  const listContainer = useRef(null);

  useEffect(() => {
    const handleRenderComplete = () => {
      if (listContainer.current) {
        const totalHeight = listContainer.current.offsetHeight;
        console.log('所有元素渲染完成，总高度：', totalHeight);
        // 这里放你要执行的操作
      }
    };

    const rafId = requestAnimationFrame(handleRenderComplete);
    return () => cancelAnimationFrame(rafId);
  }, [data]); // 依赖data，数据更新时重新触发

  return (
    <div ref={listContainer}>
      {data.map((item, idx) => (
        <div key={idx}>Show data: {item}</div>
      ))}
    </div>
  );
}

2. 用MutationObserver监听DOM变化 #

如果不确定元素什么时候渲染完成，可以用MutationObserver监听容器的子节点变化，当子节点数量和数据长度一致时，说明所有元素都已挂载。

import { useEffect, useRef } from 'react';

function LargeList({ data }) {
  const listContainer = useRef(null);

  useEffect(() => {
    if (!listContainer.current) return;

    const observer = new MutationObserver((mutations) => {
      // 检查是否所有预期元素都已渲染
      if (listContainer.current.children.length === data.length) {
        const totalHeight = listContainer.current.offsetHeight;
        console.log('全部渲染完成，总高度：', totalHeight);
        observer.disconnect(); // 完成后停止监听，避免重复触发
      }
    });

    // 监听容器的子节点添加/移除事件
    observer.observe(listContainer.current, { childList: true });

    return () => observer.disconnect();
  }, [data]);

  return (
    <div ref={listContainer}>
      {data.map((item, idx) => (
        <div key={idx}>Show data: {item}</div>
      ))}
    </div>
  );
}

3. 用useLayoutEffect同步获取DOM状态 #

useLayoutEffect会在DOM更新完成后同步执行，比useEffect更早触发，适合需要立即获取DOM信息的场景。但注意别在这里做耗时操作，会阻塞页面渲染。

import { useLayoutEffect, useRef } from 'react';

function LargeList({ data }) {
  const listContainer = useRef(null);

  useLayoutEffect(() => {
    if (listContainer.current) {
      const totalHeight = listContainer.current.offsetHeight;
      console.log('DOM更新完成后立即获取高度：', totalHeight);
      // 执行你的操作
    }
  }, [data]);

  return (
    <div ref={listContainer}>
      {data.map((item, idx) => (
        <div key={idx}>Show data: {item}</div>
      ))}
    </div>
  );
}

4. 兜底方案：setTimeout延迟执行 #

如果上面的方法都不适用，可以用setTimeout把操作放到当前事件循环的末尾，确保DOM渲染完成。缺点是时间不太好把控，但简单场景够用。

import { useEffect, useRef } from 'react';

function LargeList({ data }) {
  const listContainer = useRef(null);

  useEffect(() => {
    const timerId = setTimeout(() => {
      if (listContainer.current) {
        const totalHeight = listContainer.current.offsetHeight;
        console.log('列表总高度：', totalHeight);
        // 执行操作
      }
    }, 0); // 0毫秒会把任务放到当前宏任务结束后执行

    return () => clearTimeout(timerId);
  }, [data]);

  return (
    <div ref={listContainer}>
      {data.map((item, idx) => (
        <div key={idx}>Show data: {item}</div>
      ))}
    </div>
  );
}

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