如何在React中通过useEffect根据布尔状态控制脚本执行与移除？

核心思路是利用useEffect的依赖监听与清理机制：当布尔state为true时注入脚本并执行逻辑；当state变为false时，在清理函数中移除脚本并清理全局副作用。

完整实现代码 #

import { useState, useEffect } from 'react';

function YourComponent() {
  // 控制脚本加载的布尔状态
  const [shouldLoadGist, setShouldLoadGist] = useState(false);

  useEffect(() => {
    if (shouldLoadGist) {
      // 避免重复加载
      if (!window.gist) {
        // 执行目标脚本逻辑（修正了原代码的中文引号问题）
        (function(d, h, w) {
          var gist = w.gist = w.gist || [];
          gist.methods = ['trackPageView', 'identify', 'track', 'setAppId'];
          gist.factory = function(t) {
            return function() {
              var e = Array.prototype.slice.call(arguments);
              e.unshift(t);
              gist.push(e);
              return gist;
            };
          };
          for (var i = 0; i < gist.methods.length; i++) {
            var c = gist.methods[i];
            gist[c] = gist.factory(c);
          }
          // 创建并插入脚本，添加唯一ID方便后续移除
          const s = d.createElement('script');
          s.src = "你的实际脚本URL";
          s.async = true;
          s.id = 'gist-tracking-script';
          const e = d.getElementsByTagName(h)[0];
          e.appendChild(s);
          s.addEventListener('load', () => {}, false);
          gist.setAppId("你的AppID");
          gist.trackPageView();
        })(document, 'head', window);
      }
    } else {
      // 状态为false时执行清理
      const gistScript = document.getElementById('gist-tracking-script');
      if (gistScript) gistScript.remove();
      // 清理全局变量，避免残留
      if (window.gist) delete window.gist;
    }

    // 组件卸载或依赖变化时的清理逻辑
    return () => {
      const gistScript = document.getElementById('gist-tracking-script');
      if (gistScript) gistScript.remove();
      if (window.gist) delete window.gist;
    };
  }, [shouldLoadGist]); // 监听布尔状态变化

  return (
    <div>
      {/* 示例控制按钮 */}
      <button onClick={() => setShouldLoadGist(!shouldLoadGist)}>
        {shouldLoadGist ? '关闭Gist脚本' : '加载Gist脚本'}
      </button>
    </div>
  );
}

export default YourComponent;

关键说明 #

• 依赖触发：useEffect的依赖数组传入shouldLoadGist，确保状态切换时自动执行加载/清理逻辑。
• 防重复加载：通过window.gist判断是否已加载，避免多次触发重复创建脚本。
• 精准移除：给动态创建的脚本添加唯一id，后续可以精准查找并移除。
• 全局清理：移除脚本后删除window.gist变量，避免残留的全局状态影响其他功能。
• 卸载清理：useEffect的返回函数会在组件卸载时执行，防止内存泄漏。

注意事项 #

• 替换代码中的"你的实际脚本URL"和"你的AppID"为你的真实配置。
• 原代码中的中文引号（‘’/“”）已替换为英文引号，避免语法错误。
• 如果外部脚本还创建了其他全局变量，需要在清理环节一并删除。

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