ReactJS中如何强制刷新div样式更新以实时计算高度？

问题根源在于浏览器的布局渲染机制：当你通过style.fontSize修改字体大小后，浏览器不会立刻重新计算DOM的布局属性（比如offsetHeight），而是将这类DOM修改操作放入队列，等当前JavaScript执行上下文结束后，才会一次性完成重排和重绘。这就导致你在同一个函数里修改字体后立刻读取offsetHeight，拿到的还是修改前的旧值。

下面是几种可行的解决方法：

方法1：用requestAnimationFrame延迟计算 #

把获取高度的逻辑放到下一帧执行，此时浏览器已完成布局更新：

function adjustFontSize(event) {
  const target = event.currentTarget;
  // 这里是你的字体大小调整逻辑
  fontState += 1;
  target.style.fontSize = `${fontState}px`;

  // 放到下一帧获取最新高度
  requestAnimationFrame(() => {
    let totalHeight = 0;
    for (let i = 0; i < target.childNodes.length; i++) {
      totalHeight += target.childNodes[i].offsetHeight;
    }
    // 此处拿到的是修改字体后的真实高度，可继续后续逻辑
    console.log('最新总高度:', totalHeight);
  });
}

方法2：强制触发浏览器重排 #

修改字体大小后，主动读取会触发重排的属性，迫使浏览器立刻更新布局：

function adjustFontSize(event) {
  const target = event.currentTarget;
  // 调整字体大小
  fontState += 1;
  target.style.fontSize = `${fontState}px`;

  // 强制触发重排，getBoundingClientRect会让浏览器立刻计算最新布局
  target.getBoundingClientRect();

  // 现在读取offsetHeight就是最新值
  let totalHeight = 0;
  for (let i = 0; i < target.childNodes.length; i++) {
    totalHeight += target.childNodes[i].offsetHeight;
  }
  console.log('最新总高度:', totalHeight);
}

方法3：用offsetHeight触发重排（极简方式） #

这是另一种触发重排的简洁写法，效果和getBoundingClientRect一致：

function adjustFontSize(event) {
  const target = event.currentTarget;
  fontState += 1;
  target.style.fontSize = `${fontState}px`;

  // 强制重排，void避免返回值干扰逻辑
  void target.offsetHeight;

  // 计算最新高度
  let totalHeight = 0;
  for (let i = 0; i < target.childNodes.length; i++) {
    totalHeight += target.childNodes[i].offsetHeight;
  }
}

注意：如果是在实时输入场景下调整字体，建议加入节流/防抖逻辑，避免频繁触发重排影响性能。

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