React项目中为何无法在作用域外访问querySelector获取的元素？

问题描述 #

我正在开发一个HTML/CSS/React/JS项目，想要重构重复的类元素变量赋值代码。示例中编写了一个事件监听器，用于根据窗口大小改变div的缩放比例。但当我将resizeCallback内的rotateName变量移至Home函数最外层时，代码就失效了。原本理解作用域外声明的变量可在内部函数中使用，请问这个问题是和React.useEffect的执行机制有关，还是我对闭包的概念存在误解？

示例代码：

import React from 'react';

function Home() {
  const [scrollX, setScrollX] = React.useState(document.body.scrollWidth);
  const [scrollY, setScrollY] = React.useState(document.body.scrollHeight);

  const resizeCallback = () => {
    const rotateName = document.querySelector('.rotateName');
    const y = document.body.scrollHeight / scrollY;
    const x = document.body.scrollWidth / scrollX;

    rotateName.style.scale = x * y * 1.2;
  };

  React.useEffect(() => {
    window.addEventListener('resize', resizeCallback);

    return () => {
      window.removeEventListener('resize', resizeCallback);
    };
  }, []);

  return (
    <div className="home">
      <div className="rotateName">
        <p>My name is</p>
        <div className="firstN"><h1>John</h1></div>
        <div className="lastN"><h1>Doe</h1></div>
      </div>
    </div>
  );
}

export default Home;

原因分析与解决方案 #

核心问题：DOM查询时机错误 #

把rotateName移到Home函数最外层（组件函数外部）时，document.querySelector('.rotateName')会在组件还未渲染、DOM节点尚未挂载的时候就执行，此时DOM中根本不存在.rotateName元素，所以rotateName的值是null。后续触发resize事件时，给null.style.scale赋值自然会报错，导致代码失效。

而原来写在resizeCallback内部的写法，每次触发resize时才执行DOM查询，此时组件已经完成渲染，DOM中存在目标元素，所以能正常获取节点并操作样式。

关于闭包与useEffect的补充 #

如果是把rotateName移到Home函数内部（组件函数里，而非最外层），才会涉及闭包和useEffect的执行机制问题：

• 组件首次渲染时，在useState之后执行document.querySelector，此时DOM还没挂载，拿到的还是null
• 即使后续组件重新渲染，新的rotateName变量也不会被旧的resizeCallback捕获——因为useEffect的依赖数组是空数组，它只会在组件挂载时执行一次，回调里的闭包捕获的是首次渲染时的变量值。

更符合React规范的写法 #

React中不推荐直接用document.querySelector操作DOM，更合适的方式是使用useRef来获取DOM节点，同时修正useEffect的依赖数组，避免闭包导致的旧值问题：

import React from 'react';

function Home() {
  const [scrollX, setScrollX] = React.useState(document.body.scrollWidth);
  const [scrollY, setScrollY] = React.useState(document.body.scrollHeight);
  // 创建ref用于绑定DOM节点
  const rotateNameRef = React.useRef(null);

  const resizeCallback = () => {
    const y = document.body.scrollHeight / scrollY;
    const x = document.body.scrollWidth / scrollX;

    // 确保DOM节点存在再操作样式
    if (rotateNameRef.current) {
      rotateNameRef.current.style.scale = x * y * 1.2;
    }
  };

  React.useEffect(() => {
    window.addEventListener('resize', resizeCallback);

    return () => {
      window.removeEventListener('resize', resizeCallback);
    };
  }, [scrollX, scrollY]); // 添加依赖，确保回调能获取最新的scrollX/scrollY值

  return (
    <div className="home">
      {/* 将ref绑定到目标DOM节点 */}
      <div className="rotateName" ref={rotateNameRef}>
        <p>My name is</p>
        <div className="firstN"><h1>John</h1></div>
        <div className="lastN"><h1>Doe</h1></div>
      </div>
    </div>
  );
}

export default Home;

这个写法的优势：

1. 通过useRef安全获取DOM节点，避免直接查询DOM的不确定性
2. 给useEffect添加正确的依赖数组，确保resizeCallback能捕获到最新的scrollX和scrollY值
3. 增加节点存在性判断，避免DOM未挂载时的报错

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