当前位置：首页 > React

react如何延迟卸载

2026-02-12 00:29:57React

延迟卸载组件的实现方法

在React中实现延迟卸载通常用于处理动画、过渡效果或清理操作。以下是几种常见方法：

使用CSS过渡和状态控制

通过结合React的状态管理和CSS过渡效果实现延迟卸载：

react如何延迟卸载

function DelayedUnmount() {
  const [isMounted, setIsMounted] = useState(true);
  const [shouldRender, setShouldRender] = useState(true);

  const handleUnmount = () => {
    setIsMounted(false);
    setTimeout(() => setShouldRender(false), 500); // 延迟500ms后卸载
  };

  return (
    <div>
      {shouldRender && (
        <div className={`fade ${isMounted ? 'in' : 'out'}`}>
          Content to unmount
        </div>
      )}
      <button onClick={handleUnmount}>Unmount</button>
    </div>
  );
}

对应CSS：

react如何延迟卸载

.fade {
  transition: opacity 0.5s ease;
}
.fade.in {
  opacity: 1;
}
.fade.out {
  opacity: 0;
}

使用React Transition Group

React Transition Group库提供了更专业的过渡控制：

import { CSSTransition } from 'react-transition-group';

function TransitionExample() {
  const [show, setShow] = useState(true);

  return (
    <div>
      <CSSTransition
        in={show}
        timeout={300}
        unmountOnExit
        classNames="fade"
      >
        <div>Content to unmount</div>
      </CSSTransition>
      <button onClick={() => setShow(false)}>Unmount</button>
    </div>
  );
}

自定义Hook实现

创建自定义Hook封装延迟卸载逻辑：

function useDelayedUnmount(isMounted, delayTime) {
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    let timeoutId;
    if (isMounted && !shouldRender) {
      setShouldRender(true);
    } else if (!isMounted && shouldRender) {
      timeoutId = setTimeout(() => setShouldRender(false), delayTime);
    }
    return () => clearTimeout(timeoutId);
  }, [isMounted, delayTime, shouldRender]);

  return shouldRender;
}

// 使用示例
function Component() {
  const [isMounted, setIsMounted] = useState(true);
  const shouldRender = useDelayedUnmount(isMounted, 500);

  return (
    <div>
      {shouldRender && <ChildComponent isMounted={isMounted} />}
      <button onClick={() => setIsMounted(false)}>Unmount</button>
    </div>
  );
}