ReactJS 实现页面初始化自动显示Alert后自动消失的逻辑如何实现？

核心实现逻辑 #

• 用状态变量控制Alert的渲染与否，初始状态设为true保证页面加载直接显示
• 通过useEffect钩子在组件首次挂载时注册延时定时器，到达指定时长后修改状态隐藏Alert
• 必须在useEffect的清理函数中销毁定时器，避免组件提前卸载时触发定时器导致内存泄漏

函数组件完整代码示例 #

import { useState, useEffect } from 'react';

function Page() {
  // 显隐控制状态
  const [showAutoAlert, setShowAutoAlert] = useState(true);
  // 自动关闭时长，单位：毫秒，示例为3秒
  const ALERT_DURATION = 3000;

  useEffect(() => {
    // 注册自动关闭定时器
    const closeTimer = setTimeout(() => {
      setShowAutoAlert(false);
    }, ALERT_DURATION);

    // 清理定时器
    return () => clearTimeout(closeTimer);
  }, []); // 空依赖保证仅在组件首次挂载时执行一次

  return (
    <div className="page-container">
      {/* 条件渲染Alert */}
      {showAutoAlert && (
        <div className="custom-alert">
          页面初始化完成，本提示3秒后自动消失
        </div>
      )}
      {/* 其余页面内容 */}
    </div>
  );
}

export default Page;

类组件实现方案 #

如果项目还在使用类组件，逻辑和函数组件一致，仅需替换为生命周期方法实现即可：

import React, { Component } from 'react';

class Page extends Component {
  state = {
    showAutoAlert: true
  }
  ALERT_DURATION = 3000;
  closeTimer = null;

  componentDidMount() {
    this.closeTimer = setTimeout(() => {
      this.setState({ showAutoAlert: false });
    }, this.ALERT_DURATION);
  }

  componentWillUnmount() {
    clearTimeout(this.closeTimer);
  }

  render() {
    return (
      <div className="page-container">
        {this.state.showAutoAlert && (
          <div className="custom-alert">
            页面初始化完成，本提示3秒后自动消失
          </div>
        )}
      </div>
    );
  }
}

export default Page;

额外说明 #

如果项目使用第三方UI组件库，大部分组件库的全局提示/Alert组件都内置了自动关闭能力，无需手动写定时器逻辑：

• Ant Design 可以直接调用message.info('提示内容', 3)，第二个参数就是自动关闭的秒数，默认会在调用时直接弹出，到时间自动消失
• MUI 可以使用Snackbar组件，配置autoHideDuration参数实现自动关闭

内容的提问来源于stack exchange，提问作者20-Abbas Murudkar