如何使用React Hooks实现弹窗模态框仅显示一次

完全可以用React Hooks实现这个需求，核心思路是通过localStorage记录用户是否已经看过弹窗，页面加载时根据存储的状态决定是否显示弹窗，关闭弹窗时同步更新localStorage的记录。

修改后的实现代码如下：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 惰性初始化弹窗状态：无本地记录则默认显示，有记录则不显示
  const [showModal, setShowModal] = useState<boolean>(() => {
    const hasSeenModal = localStorage.getItem('hasSeenModal');
    return !hasSeenModal;
  });

  // 弹窗关闭时同步记录到localStorage
  useEffect(() => {
    if (!showModal) {
      localStorage.setItem('hasSeenModal', 'true');
    }
  }, [showModal]);

  return (
    <ModalIsContractor
      showModal={showModal}
      setShowModal={setShowModal}
    />
  );
};

关键逻辑说明 #

• useState惰性初始化：传入函数而非直接值，避免每次组件渲染都读取localStorage，提升性能。读取hasSeenModal标记，不存在则返回true（显示弹窗），存在则返回false（不显示）。
• useEffect状态同步：监听showModal的变化，当弹窗被关闭（状态变为false）时，往localStorage存入标记，确保下次页面加载时不会再触发弹窗。

额外提示 #

如果需要重置弹窗的显示状态，只需在浏览器控制台执行localStorage.removeItem('hasSeenModal')，下次加载页面时弹窗会再次自动显示。

内容的提问来源于stack exchange，提问作者Joao Vitor