React函数组件中useEffect获取元素为null的原因及解决方法

问题重现 #

你在React组件中尝试通过useEffect获取DOM元素，无论用document.getElementById还是useRef，偶尔会拿到null，最简复现代码：

import React from 'react';

const App: React.FC = () => {
  React.useEffect(()=>{
    const resizeElement = document.getElementById("demo");
    if(resizeElement == null){
      console.log("resizeElement is null");
    }
  },[]);

  return <div id="demo"></div>;
}

export default App;

尝试useRef后问题依旧：

import React, { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const demoRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const resizeElement = demoRef.current;
    if (resizeElement == null) {
      console.log("resizeElement is null");
    }
  }, [demoRef]);

  return <div id="demo" ref={demoRef}></div>;
}

export default App;

生产环境的缩放代码还依赖setTimeout(1500)来延迟获取元素，这种hack不仅不可靠，还可能引发其他问题。

为啥会拿到null？ #

1. document.getElementById+空依赖useEffect的问题：
   空依赖useEffect本应在组件挂载完成后执行，但如果组件存在条件渲染（比如某个状态控制元素是否显示），或者开启了React 18的并发渲染，React可能会推迟DOM渲染，导致useEffect执行时元素还没挂载。

2. useRef依赖写错了：
   useRef返回的是一个永久不变的对象，把demoRef放进依赖数组没用——React只会检测demoRef本身的引用，不会管demoRef.current的变化。所以useEffect只会执行一次，如果那次执行时current还没被赋值（比如元素还没渲染），就会拿到null。

3. 生产环境的setTimeout是无效hack：
   1.5秒的延迟完全是拍脑袋，没法保证元素一定在这个时间点挂载，延迟太长影响体验，太短还是会出问题；而且直接用getElementById脱离了React的生命周期，元素卸载后还持有引用会导致内存泄漏。

稳定获取DOM的正确姿势 #

1. 正确用useRef+useEffect #

别把demoRef放进依赖数组，直接在useEffect里用demoRef.current，同时做好非空判断：

import React, { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const demoRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const resizeElement = demoRef.current;
    if (!resizeElement) return;

    // 这里写你的DOM操作逻辑
    console.log("拿到元素了：", resizeElement);

    // 组件卸载时清理（比如移除事件监听）
    return () => {
      // 示例：如果绑定了事件，在这里移除
      // resizeElement.removeEventListener('xxx', handler);
    };
  }, []); // 空依赖，只在挂载后执行一次

  return <div ref={demoRef}></div>;
}

export default App;

如果元素是条件渲染的，把控制渲染的状态放进依赖数组，确保状态变化后重新检查：

import React, { useEffect, useRef, useState } from 'react';

const App: React.FC = () => {
  const [isShowDemo, setIsShowDemo] = useState(true);
  const demoRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!isShowDemo) return;
    const resizeElement = demoRef.current;
    if (!resizeElement) return;

    // 执行逻辑
  }, [isShowDemo]); // 依赖控制渲染的状态

  return isShowDemo ? <div ref={demoRef}></div> : null;
}

2. 用回调式ref捕获元素 #

回调ref会在元素挂载/卸载时自动触发，能直接拿到元素，不用依赖useEffect：

import React from 'react';

const App: React.FC = () => {
  const handleDemoRef = (element: HTMLDivElement | null) => {
    if (!element) {
      // 元素卸载时的清理逻辑，比如移除事件
      return;
    }
    // 元素挂载时的逻辑，比如绑定事件
    console.log("元素已挂载：", element);
  };

  return <div ref={handleDemoRef}></div>;
}

3. 生产环境缩放功能的优化 #

把你的缩放代码改成React友好的写法，移除setTimeout，用useRef绑定元素，同时做好事件清理：

import React, { useEffect, useRef } from 'react';

const App: React.FC = () => {
  const resizeAreaRef = useRef<HTMLElement>(null);
  const resizeBarRef = useRef<HTMLElement>(null);
  const prjTreeRef = useRef<HTMLElement>(null); // 对应你的divRef

  useEffect(() => {
    const resizeElement = resizeAreaRef.current;
    const resizeBar = resizeBarRef.current;
    const prjTree = prjTreeRef.current;

    // 确保所有依赖元素都存在
    if (!resizeElement || !resizeBar || !prjTree) return;

    let prevCursorOffset = -1;
    let resizing = false;

    // 抽离事件处理函数，方便移除监听
    const handleMousedown = () => {
      resizing = true;
    };

    const handleMousemove = (e: MouseEvent) => {
      if (!resizing) return;
      e.preventDefault();
      e.stopPropagation();

      const prjTreeWidth = prjTree.offsetWidth;
      const { screenX } = e;

      if (prevCursorOffset === -1) {
        prevCursorOffset = screenX;
      } else if (Math.abs(prevCursorOffset - screenX) >= 5) {
        resizeElement.style.flex = `0 0 ${screenX - prjTreeWidth - 18}px`;
        resizeElement.style.maxWidth = "100vw";
        prevCursorOffset = screenX;
      }
    };

    const handleMouseup = () => {
      resizing = false;
      prevCursorOffset = -1;
    };

    // 绑定事件
    resizeBar.addEventListener('mousedown', handleMousedown);
    window.addEventListener('mousemove', handleMousemove);
    window.addEventListener('mouseup', handleMouseup);

    // 清理函数：组件卸载时移除所有事件监听，防止内存泄漏
    return () => {
      resizeBar.removeEventListener('mousedown', handleMousedown);
      window.removeEventListener('mousemove', handleMousemove);
      window.removeEventListener('mouseup', handleMouseup);
    };
  }, []); // 空依赖，只执行一次

  return (
    <div className="container">
      <div ref={prjTreeRef}> {/* 项目树元素 */}
        {/* 内容 */}
      </div>
      <div ref={resizeAreaRef}> {/* 可缩放区域 */}
        {/* 内容 */}
      </div>
      <div ref={resizeBarRef} className="resize-bar"> {/* 缩放条 */}
        {/* 内容 */}
      </div>
    </div>
  );
}

export default App;

4. 并发渲染的特殊处理 #

如果用的是React 18+，并发模式下可以把useEffect换成useLayoutEffect——它会在DOM更新后、浏览器绘制前同步执行，能更早拿到DOM元素，适合需要立即操作DOM的场景，用法和useEffect完全一样。

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