React中useEffect内ref的current值未在首次渲染赋值的问题咨询

核心原因 #

React中，ref的current值会在组件首次渲染完成、DOM元素挂载到页面后才被赋值，所以首次渲染阶段的useEffect（空依赖）里直接访问会得到null。你之前添加ElemenentIGotWithRef.current到依赖数组的做法不可行，因为ref是可变容器，current的变化不会触发组件重渲染，React无法正确监测这个依赖，反而会导致副作用逻辑异常。

可行解决方案 #

1. 空依赖useEffect+条件判断（标准挂载时机处理）

如果DOM元素是无条件渲染的（即每次组件渲染都会存在），直接使用空依赖的useEffect，它会在组件挂载完成后执行，此时ref.current已经有值：

useEffect(() => {
  const targetElement = ElemenentIGotWithRef.current;
  if (targetElement) {
    observer.current.observe(targetElement);
  }

  return () => {
    observer.current.disconnect();
  };
}, []);

如果DOM元素是条件渲染的（比如通过{isShow && <div ref={...} />}控制），把条件变量加入依赖数组，确保元素出现时执行观察：

useEffect(() => {
  const targetElement = ElemenentIGotWithRef.current;
  if (targetElement) {
    observer.current.observe(targetElement);
  }

  return () => {
    observer.current.disconnect();
  };
}, [isShow]); // isShow是控制元素渲染的变量

2. 回调式Ref（直接在DOM挂载时获取元素）

使用回调式ref可以在DOM元素挂载到页面的第一时间拿到元素，不需要依赖useEffect的执行时机，同时还能在元素卸载时自动清理：

import { useCallback, useRef } from 'react';

// 初始化observer
const observer = useRef(new IntersectionObserver((entries) => {
  // 你的观察逻辑
}));

// 定义回调式ref
const ElemenentIGotWithRef = useCallback((element) => {
  if (element) {
    // DOM挂载时开始观察
    observer.current.observe(element);
  } else {
    // DOM卸载时停止观察
    observer.current.disconnect();
  }
}, []); // 若observer依赖其他变量，需加入依赖数组

// JSX中使用
return <div ref={ElemenentIGotWithRef}>需要观察的元素</div>;

这种方式是最直接的，能精准控制观察的生命周期，避免依赖时机问题。

总结 #

优先选择回调式ref，它能直接绑定DOM的挂载/卸载时机，逻辑最清晰；其次是空依赖useEffect+条件判断，适合无条件渲染的DOM元素。避免将ref.current直接加入依赖数组，这会导致不可预期的副作用。

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