React组件卸载前先渲染问题及获取div ID方案咨询

问题原因：React的渲染与副作用执行顺序 #

你遇到的不是“异常行为”，这是React的正常执行逻辑：当触发组件卸载（比如state变化导致组件不再渲染目标div），React会先执行新状态下的渲染流程——如果新渲染结果里没有目标div，React会立刻将对应的DOM节点从页面移除，同时把指向它的ref设为null。之后，才会执行上一次渲染周期中useEffect的清理函数。这就导致你在清理函数里调用getId时，DOM元素已经不存在了。

替代方案 #

1. 提前存储DOM元素的ID到ref

在组件挂载时，就把目标div的ID存入独立的ref中，这样即使DOM被移除，依然能从ref里拿到ID：

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

function YourComponent() {
  const divRef = useRef(null);
  const divIdRef = useRef(null);
  const [state, setState] = useState(false);

  // 挂载时存储div的ID
  useEffect(() => {
    if (divRef.current) {
      divIdRef.current = divRef.current.id;
    }
  }, []);

  // 卸载时使用提前存储的ID
  useEffect(() => {
    return () => {
      console.log('卸载时的div ID:', divIdRef.current);
    };
  }, [state]);

  return state ? null : <div ref={divRef} id="target-div">目标元素</div>;
}

2. 直接复用生成ID的逻辑（推荐）

如果div的ID是你自己定义的（固定或动态生成），完全不需要从DOM中获取——直接在代码中保存ID的值，卸载时直接使用：

import { useEffect, useState } from 'react';

function YourComponent() {
  // 固定ID的情况
  const targetDivId = 'fixed-target-id';
  // 动态生成ID的情况
  // const [targetDivId] = useState(`dynamic-id-${Math.random()}`);
  const [state, setState] = useState(false);

  useEffect(() => {
    return () => {
      console.log('卸载时的div ID:', targetDivId);
    };
  }, [state]);

  return state ? null : <div id={targetDivId}>目标元素</div>;
}

3. 用useCallback绑定ref的最新值

如果必须在清理函数中访问DOM元素的最新状态，可以结合useCallback和ref的current属性，确保清理函数能拿到最新的ref值（不过这种方式依然依赖DOM存在的时机，不如前两种稳妥）：

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

function YourComponent() {
  const divRef = useRef(null);
  const [state, setState] = useState(false);

  const getId = useCallback(() => {
    return divRef.current?.id;
  }, []);

  useEffect(() => {
    return () => {
      // 注意：如果DOM已被移除，这里还是会返回undefined，仅适用于卸载前DOM还存在的场景
      console.log('卸载时的div ID:', getId());
    };
  }, [state, getId]);

  return state ? null : <div ref={divRef} id="target-div">目标元素</div>;
}

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