React中ref.getBoundingClientRect().width在onChange时总是滞后一步的问题

这问题其实是React的异步更新机制在搞鬼！当你在输入框的onChange回调里直接去拿ref的宽度时，此时React还没来得及把新的输入值渲染到对应的span元素上——状态更新是异步的，组件重新渲染、DOM更新的过程会在onChange回调执行完之后才发生，所以你拿到的必然是更新前的旧宽度。

解决方法有两种，推荐第一种： #

1. 用useLayoutEffect监听输入状态变化 #

useLayoutEffect的执行时机是DOM更新完成后立即同步执行，这时候span的文本已经更新成最新的输入值，你就能拿到准确的宽度了。

假设你的输入框是用state来控制值的（React里表单元素基本都这么做），代码可以改成这样：

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

function YourComponent() {
  const metaRef = useRef(null);
  const urlRef = useRef(null);
  const descRef = useRef(null);

  // 用state管理三个输入框的值
  const [inputValues, setInputValues] = useState({
    meta: '',
    url: '',
    desc: ''
  });

  const handlePixelChange = (value) => {
    console.log(value);
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    // 更新输入状态
    setInputValues(prev => ({ ...prev, [name]: value }));
  };

  // 监听输入状态变化，DOM更新后获取宽度
  useLayoutEffect(() => {
    // 确保ref都已绑定到DOM元素
    if (metaRef.current && urlRef.current && descRef.current) {
      const pixelLengthBundled = {
        title: metaRef.current.getBoundingClientRect().width.toFixed(),
        url: urlRef.current.getBoundingClientRect().width.toFixed(),
        desc: descRef.current.getBoundingClientRect().width.toFixed()
      };
      handlePixelChange(pixelLengthBundled);
    }
  }, [inputValues]); // 依赖输入状态，状态变化就触发

  return (
    <div>
      <input name="meta" value={inputValues.meta} onChange={handleInputChange} />
      <span ref={metaRef}>{inputValues.meta}</span>

      <input name="url" value={inputValues.url} onChange={handleInputChange} />
      <span ref={urlRef}>{inputValues.url}</span>

      <input name="desc" value={inputValues.desc} onChange={handleInputChange} />
      <span ref={descRef}>{inputValues.desc}</span>
    </div>
  );
}

2. 用requestAnimationFrame延迟获取宽度 #

如果你不想用useLayoutEffect，也可以在onChange里用requestAnimationFrame，它会在下一次浏览器重绘前执行，此时DOM已经更新完毕：

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setInputValues(prev => ({ ...prev, [name]: value }));

  // 延迟到DOM更新后再获取宽度
  requestAnimationFrame(() => {
    const pixelLengthBundled = {
      title: metaRef.current.getBoundingClientRect().width.toFixed(),
      url: urlRef.current.getBoundingClientRect().width.toFixed(),
      desc: descRef.current.getBoundingClientRect().width.toFixed()
    };
    handlePixelChange(pixelLengthBundled);
  });
};

不过这种方法不如useLayoutEffect稳定，因为requestAnimationFrame是异步的，可能会有极细微的延迟，而useLayoutEffect是同步执行，能确保拿到最即时的宽度。

总结一下 #

核心问题就是：你在DOM更新前就去拿了元素的宽度，所以总是慢一步。通过useLayoutEffect或者requestAnimationFrame，等待DOM更新完成后再获取宽度，就能解决这个滞后的问题啦！

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