React中document.readyState为interactive时能否获取DIV位置以实现依赖渲染？

针对你的场景，核心结论是：完全可以在document.readyState处于interactive阶段时获取已渲染DOM元素的位置——前提是目标DIV已经被挂载到DOM树中，并且完成了布局计算（比如你的rem自动重渲染逻辑已经执行完毕）。

你之前遇到的时间差问题，本质是document.readystatechange事件的时机和React组件渲染、rem计算的时机没有对齐，而非interactive阶段本身无法获取DOM位置。下面给你拆解问题并提供React场景下的可靠解决方案：

为什么你的原有方案出现时间差？ #

当document.readyState变为interactive时，浏览器已经完成了DOM的解析，但此时：

1. React可能还没完成第二个DIV的渲染（尤其是大型页面，React的组件挂载可能滞后于DOMContentLoaded事件）；
2. 你的rem自动计算逻辑可能还在执行，导致第二个DIV的位置尚未最终确定；
3. 即使DIV已在DOM中，浏览器可能还没完成重排（reflow），直接获取位置会得到不准确的值。

React场景下的可靠解决方案 #

与其监听全局的document状态，不如直接针对第二个DIV的组件挂载时机来触发位置计算——这是最精准的方式，因为React的useEffect钩子会在DOM节点挂载完成后执行。

步骤1：用ref获取第二个DIV的DOM节点 #

通过useRef钩子绑定到第二个DIV上，确保能直接访问到真实DOM：

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

function YourPage() {
  const secondDivRef = useRef(null);
  const [secondDivPos, setSecondDivPos] = useState(null);

  // 监听第二个DIV的挂载与位置变化
  useEffect(() => {
    const updatePosition = () => {
      if (!secondDivRef.current) return;
      // 强制浏览器获取最新布局信息
      const rect = secondDivRef.current.getBoundingClientRect();
      setSecondDivPos({
        top: rect.top,
        height: rect.height,
        // 根据需求添加其他属性：left、width等
      });
    };

    // 初始挂载时计算一次
    updatePosition();

    // 监听resize（适配屏幕旋转）和rem重渲染完成事件
    window.addEventListener('resize', updatePosition);
    // 如果你的rem计算有自定义触发时机，比如一个全局事件'remCalculated'
    window.addEventListener('remCalculated', updatePosition);

    // 清理监听
    return () => {
      window.removeEventListener('resize', updatePosition);
      window.removeEventListener('remCalculated', updatePosition);
    };
  }, []);

  return (
    <div className="page-container">
      {/* 第一个DIV：依赖第二个DIV的位置 */}
      <FirstDiv position={secondDivPos} />
      {/* 第二个DIV：位置固定的目标元素 */}
      <div ref={secondDivRef} id="second-div">
        {/* 你的内容 */}
      </div>
    </div>
  );
}

步骤2：给第一个DIV传递位置信息 #

在第一个DIV组件中，通过props接收位置数据，动态设置样式：

function FirstDiv({ position }) {
  // 当位置数据存在时，渲染正确的样式
  const divStyle = position ? {
    position: 'absolute',
    top: `${position.top}px`,
    height: `${position.height}px`,
    // 其他需要的样式
  } : {};

  return <div style={divStyle} className="first-div"></div>;
}

额外优化：确保布局计算完成 #

如果你的rem计算或DOM渲染存在微小延迟，可以用requestAnimationFrame延迟位置计算，确保浏览器完成重排：

useEffect(() => {
  if (secondDivRef.current) {
    requestAnimationFrame(() => {
      const rect = secondDivRef.current.getBoundingClientRect();
      setSecondDivPos(rect);
    });
  }
}, []);

回到你的核心问题 #

当document.readyState处于interactive时，只要满足两个条件，就能获取到DIV的正确位置：

1. 该DIV已经被React渲染并挂载到DOM树中；
2. 你的rem自动计算逻辑已经执行完毕，元素的布局已经确定。

你之前的问题是因为全局事件的时机和组件渲染/布局计算的时机不匹配，改用React组件级的监听方案就能彻底解决时间差问题。

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