React如何无限追加DOM且避免最大深度/无限循环错误？

直接用同步while循环行不通，因为它会彻底阻塞JavaScript主线程——浏览器根本没时间渲染新添加的DOM元素，还会导致整个应用卡死。React的设计逻辑也不允许这种同步无限操作，得用异步循环来实现，比如借助requestAnimationFrame或setInterval，同时做好手动终止的控制。

实现示例 #

import { useRef, useEffect } from 'react';

function InfiniteDomUpdater() {
  // 存储DOM容器、计数器、请求ID（用于终止循环）
  const containerRef = useRef(null);
  const countRef = useRef(1);
  const requestIdRef = useRef(null);

  // 启动循环的逻辑
  const startLoop = () => {
    const updateDom = () => {
      // 手动创建并添加DOM元素
      const newDiv = document.createElement('div');
      newDiv.textContent = countRef.current;
      containerRef.current.appendChild(newDiv);
      countRef.current += 1;
      // 安排下一次更新
      requestIdRef.current = requestAnimationFrame(updateDom);
    };
    // 启动第一次更新
    requestIdRef.current = requestAnimationFrame(updateDom);
  };

  // 终止循环的逻辑
  const stopLoop = () => {
    if (requestIdRef.current) {
      cancelAnimationFrame(requestIdRef.current);
      requestIdRef.current = null;
    }
  };

  // 组件挂载时启动循环，卸载时自动终止
  useEffect(() => {
    startLoop();
    return () => stopLoop();
  }, []);

  return (
    <div>
      <button onClick={stopLoop}>终止更新</button>
      <div ref={containerRef}></div>
    </div>
  );
}

export default InfiniteDomUpdater;

关键说明 #

• 避免主线程阻塞：requestAnimationFrame会把回调安排在浏览器下一次重绘前执行，不会像while那样卡死线程，浏览器能正常渲染新添加的DOM。
• 手动控制循环：用useRef存储requestId，调用cancelAnimationFrame就能随时终止循环。
• 直接操作DOM：这里直接通过原生API往容器里追加元素，不需要通过React状态更新触发渲染，所以用useRef获取容器是合理的，避开了React的状态更新限制。

如果想用setInterval替代，逻辑类似，只需把requestAnimationFrame换成setInterval，终止时调用clearInterval即可，但requestAnimationFrame的更新时机更贴合浏览器渲染节奏，性能表现更好。

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