React组件中使用原生JS选中h1返回undefined的原因解析

核心成因 #

• 代码执行时序存在错位：写在组件函数体顶层的document.querySelector('h1')，会在组件渲染阶段同步执行。这个阶段React只是在内存中生成待渲染的虚拟DOM结构，还没有把对应的真实DOM节点挂载到页面上，全局文档里根本不存在你要查找的那个h1元素。
• 这种场景下document.querySelector找不到匹配节点，返回空值，和你控制台看到的无效结果（你感知的undefined）表现一致，本质就是查询操作发生在目标DOM挂载完成之前。
• 这个问题不是document.querySelector方法本身失效，是React的渲染机制和原生DOM操作的执行时序不匹配导致的。

React组件中合理使用原生JavaScript/DOM操作的正确姿势 #

• 不要在组件的同步执行代码（函数体顶层、非事件回调的逻辑代码）里查询当前组件负责渲染的DOM元素，因为这个阶段目标DOM根本还没插入页面。
• 当你确实需要拿到当前组件渲染出的DOM节点做原生操作时，必须等DOM挂载完成后再执行查询：
  • 把DOM查询逻辑放进useEffect的回调中，这个钩子的默认执行时机就是等真实DOM完全插入页面之后，此时再查询元素就能正常拿到结果，示例代码：

    import { useEffect } from 'react'
    
    function Home() {
      useEffect(() => {
        // 代码执行到这里时，目标h1已经完成页面挂载
        const title = document.querySelector('h1')
        console.log(title) // 正常获取到h1的DOM节点
      }, [])
    
      return (
        <div>
          <h1>Pouet</h1>
        </div>
      )
    }
    

  • 更符合React开发规范的做法是避免全局模糊查询，通过useRef直接绑定需要操作的DOM节点，从根源上避免选到页面上其他同名标签的无关元素，示例代码：

    import { useEffect, useRef } from 'react'
    
    function Home() {
      // 创建ref实例，用来绑定目标h1节点
      const titleRef = useRef(null)
    
      useEffect(() => {
        // 直接通过ref获取当前组件的h1节点，不存在匹配歧义
        console.log(titleRef.current)
      }, [])
    
      return (
        <div>
          {/* 将ref绑定到目标h1元素上 */}
          <h1 ref={titleRef}>Pouet</h1>
        </div>
      )
    }
    

• 如果要查询的DOM元素是组件外已经提前存在于页面上的内容，直接使用document.querySelector没有任何问题，这类元素本身就已经完成页面挂载，不存在时序错位的问题。

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