React中同一ref.current.clientHeight获取值不一致异常问题求助

核心原因 #

• Chrome控制台的对象是懒加载的：打印test.current时仅存储DOM节点的引用，手动展开对象时才会实时读取节点的最新属性，看到的是高度更新后的正确值；而console.log(test.current.clientHeight)是代码执行到该行时立即读取的当时的高度，是尚未更新的旧值，所以两者数值不一致。
• 高度读取的时机错误：空依赖的useEffect仅在组件首次挂载完成的瞬间执行，此时会出现两种情况导致高度不准：
  1. 若state.multiLineString是挂载后才完成赋值（如异步请求获取、初始为空后续更新），首次挂载时Input内还没有渲染多行内容，外层div高度未被撑开
  2. 多行Input的自适应高度是组件内部在挂载后异步计算调整的，首次挂载完成时还没完成高度计算，外层div仍是初始默认高度
     使用固定文本时内容渲染前就已确定，挂载完成时DOM高度已经计算完毕，所以可以读到正确值。

解决方案 #

方案1：ResizeObserver监听高度变化（最稳妥） #

不受渲染时机、组件内部逻辑影响，只要高度发生变化就能拿到最新值：

const test = useRef(null)

useEffect(() => {
  const observer = new ResizeObserver(entries => {
    const currentHeight = entries[0].target.clientHeight
    console.log(currentHeight)
  })
  test.current && observer.observe(test.current)
  return () => observer.disconnect()
}, [])

方案2：补充useEffect依赖项 #

如果仅需要在multiLineString更新后读取高度，将其加入依赖数组，配合requestAnimationFrame确保DOM渲染完成后再读取：

const test = useRef(null)

useEffect(() => {
  requestAnimationFrame(() => {
    console.log(test.current?.clientHeight)
  })
}, [state.multiLineString])

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