当前位置：首页 > React

react如何延迟卸载

2026-03-31 03:37:50React

延迟卸载组件的实现方法

在React中实现延迟卸载组件通常需要结合状态管理和定时器。以下是几种常见方法：

使用setTimeout和useEffect

通过React的useEffect钩子和setTimeout实现延迟卸载：

import { useState, useEffect } from 'react';

function DelayedUnmount({ children, delay = 300 }) {
  const [shouldRender, setShouldRender] = useState(false);

  useEffect(() => {
    if (children) {
      setShouldRender(true);
    } else {
      const timer = setTimeout(() => {
        setShouldRender(false);
      }, delay);
      return () => clearTimeout(timer);
    }
  }, [children, delay]);

  return shouldRender ? children : null;
}

结合CSS过渡动画

利用CSS过渡效果实现视觉上的延迟卸载：

function FadeTransition({ show, children }) {
  const [shouldRender, setRender] = useState(show);

  useEffect(() => {
    if (show) setRender(true);
  }, [show]);

  const onAnimationEnd = () => {
    if (!show) setRender(false);
  };

  return (
    shouldRender && (
      <div
        style={{
          animation: `${show ? 'fadeIn' : 'fadeOut'} ${300}ms`,
        }}
        onAnimationEnd={onAnimationEnd}
      >
        {children}
      </div>
    )
  );
}

使用第三方库

考虑使用现成的动画库如react-transition-group：

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

<CSSTransition
  in={isVisible}
  timeout={300}
  unmountOnExit
  classNames="fade"
>
  <div>内容</div>
</CSSTransition>

自定义Hook实现

创建可复用的useDelayedUnmount Hook：

react如何延迟卸载

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;
}

每种方法适用于不同场景，可根据项目需求选择最合适的实现方式。CSS过渡方案适合需要动画效果的场景，而自定义Hook则提供了更大的灵活性。

标签: react