react如何延迟卸载

延迟卸载组件的方法

在React中，可以通过结合useState、useEffect和setTimeout实现延迟卸载组件的效果。以下是两种常见场景的实现方式：

使用状态控制卸载时机

通过设置一个状态标记控制组件是否渲染，结合setTimeout延迟更新状态：

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    let timer;
    if (!shouldRender) {
      timer = setTimeout(() => {
        setShouldRender(false);
      }, delay);
    }
    return () => clearTimeout(timer);
  }, [shouldRender, delay]);

  return shouldRender ? children : null;
}

// 使用示例
<DelayedUnmount delay={500}>
  <MyComponent />
</DelayedUnmount>

带动画的延迟卸载

当需要配合CSS动画/过渡效果时，通常需要保持DOM元素短暂存在：

function AnimatedUnmount({ isVisible, children }) {
  const [shouldRender, setShouldRender] = useState(isVisible);

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

  return (
    <div style={{ transition: 'opacity 200ms', opacity: isVisible ? 1 : 0 }}>
      {shouldRender && children}
    </div>
  );
}

注意事项

• 清除定时器非常重要，必须在useEffect的清理函数中调用clearTimeout
• 延迟时间需要与CSS动画持续时间匹配
• 对于复杂场景，可以考虑使用第三方动画库如Framer Motion，其内置了延迟卸载功能