react-bootstrap-sweetAlert组件show为false仍渲染及内部函数调用问题

我之前也碰到过这个问题！react-bootstrap-sweetalert的show属性其实只是通过CSS控制组件的显示/隐藏，并不会在show=false时卸载组件——这就导致哪怕弹窗看不见，它内部的函数还是会持续执行，确实挺闹心的。

最直接的解决方案：条件渲染 #

核心思路是只有当show为true时，才将SweetAlert组件挂载到DOM中，这样show=false时组件完全不存在，内部函数自然不会被调用。

原来的问题代码：

import SweetAlert from 'react-bootstrap-sweetalert';
import { useState } from 'react';

function MyAlertComponent() {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <div>
      <button onClick={() => setShowAlert(true)}>弹出提示</button>
      {/* 哪怕showAlert为false，这个组件依然会被渲染 */}
      <SweetAlert
        show={showAlert}
        title="提示"
        onConfirm={() => setShowAlert(false)}
        // 这里的内部回调/逻辑会持续触发
      />
    </div>
  );
}

修改后的代码：

import SweetAlert from 'react-bootstrap-sweetalert';
import { useState } from 'react';

function MyAlertComponent() {
  const [showAlert, setShowAlert] = useState(false);

  return (
    <div>
      <button onClick={() => setShowAlert(true)}>弹出提示</button>
      {/* 只有showAlert为true时，才渲染SweetAlert */}
      {showAlert && (
        <SweetAlert
          show={showAlert}
          title="提示"
          onConfirm={() => setShowAlert(false)}
          // 现在这些逻辑只有在弹窗挂载后才会执行
        />
      )}
    </div>
  );
}

为什么这个方法有效？ #

React的条件渲染会直接跳过false分支的组件挂载，当showAlert切换为false时，SweetAlert会被彻底卸载，它内部的所有生命周期函数、回调逻辑都会停止执行，从根源上解决了“频繁调用”的问题。

如果你的弹窗有需要清理的逻辑（比如定时器、订阅），还可以在SweetAlert内部用useEffect的清理函数，卸载时会自动触发：

// 在SweetAlert的子组件或自定义弹窗组件中
useEffect(() => {
  const timer = setInterval(() => {
    // 某些定时逻辑
  }, 1000);
  
  // 组件卸载时清理定时器
  return () => clearInterval(timer);
}, []);

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