React热重载后如何重置状态？解决window.open自动触发问题

本地开发时，项目保存触发热重载后，组件state里的data会被保留，导致依赖data的useEffect自动执行window.open，出现不必要的弹窗。目前通过isMounted标记加清理逻辑解决，以下是更优的处理方式：

现有代码回顾 #

原始问题代码 #

const [data, setData] = useState(null);

// 按钮点击时更新data的逻辑

useEffect(()=>{
    if(data){
        window.open('https://example.com', '_blank')
    }
}, [data])

当前解决代码 #

const [data, setData] = useState(null);
const isMounted = useRef(false);

// 按钮点击时更新data的逻辑

useEffect(()=>{
    return ()=>{
        // 卸载前清理
        isMounted.current = false
    }
}, [])

useEffect(()=>{
    if(isMounted.current){
        if(data){
            window.open('https://example.com', '_blank')
        }
    }else{
        isMounted.current=true
    }
    
}, [data])

更优方案 #

方案一：直接绑定到点击事件（推荐） #

既然弹窗是用户点击按钮触发的，直接把window.open放到点击事件里，完全绕过state变化的副作用，从根源避免热重载的影响：

const [data, setData] = useState(null);

const handleOpen = () => {
    // 先执行更新data的逻辑
    setData(/* 你的数据更新逻辑 */);
    // 再触发弹窗
    window.open('https://example.com', '_blank');
};

// 按钮渲染
<button onClick={handleOpen}>打开链接</button>

这种方式逻辑最直观，也不会受热重载保留state的影响，是最优解。

方案二：简化首次渲染判断 #

如果必须依赖state变化触发弹窗，可以用单个useEffect+useRef标记首次渲染，简化代码：

const [data, setData] = useState(null);
const isFirstRender = useRef(true);

useEffect(() => {
    // 首次渲染（包括热重载后的挂载）直接跳过
    if (isFirstRender.current) {
        isFirstRender.current = false;
        return;
    }
    // 非首次渲染且data存在时触发弹窗
    if (data) {
        window.open('https://example.com', '_blank');
    }
}, [data]);

这个方案用一个useRef就实现了首次渲染的判断，比原方案的两个useEffect更简洁，逻辑也更清晰。

方案三：热重载时重置state（仅开发环境） #

如果开发工具支持，可以监听热重载事件，在重载时重置data。比如Create React App中可以通过module.hot监听：

const [data, setData] = useState(null);

if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept(() => {
        setData(null);
    });
}

// 原有逻辑...

但这个方案依赖开发环境的配置，通用性不如前两种，仅作为补充方案。

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