React项目中如何仅加载一次外部脚本并绑定所有元素点击事件

这个场景我之前也遇到过，重复加载脚本不仅浪费网络资源，还可能引发不必要的冲突，给你几个实用的解决思路：

方案一：用全局标记+生命周期控制脚本加载（类组件） #

你的componentDidUpdate会在组件每次更新时触发，所以我们可以加一个全局标记，确保脚本只被加载一次：

// 在Shop.js文件顶部定义全局标记，记录脚本是否已加载
let isSellyScriptLoaded = false;

class Shop extends Component {
  // 组件挂载时先检查一次，避免首次渲染就错过加载时机
  componentDidMount() {
    this.loadSellyScript();
  }

  // 组件更新时再检查，防止组件重新挂载后脚本丢失
  componentDidUpdate() {
    this.loadSellyScript();
  }

  loadSellyScript() {
    if (!isSellyScriptLoaded) {
      const script = document.createElement('script');
      script.src = 'https://embed.selly.gg';
      script.async = true;
      // 脚本加载完成后标记状态，同时可以做初始化操作
      script.onload = () => {
        isSellyScriptLoaded = true;
        console.log('Selly脚本加载完成');
        // 如果脚本需要手动初始化绑定，这里可以调用对应的方法，比如window.Selly.init()
      };
      document.body.appendChild(script);
    }
  }

  // ...其他组件逻辑
}

方案二：用useEffect钩子实现单次加载（函数组件） #

如果你的Shop组件是函数式的，用React的useEffect会更简洁，空依赖数组能确保逻辑只在组件挂载时执行一次：

import { useEffect } from 'react';

function Shop() {
  useEffect(() => {
    // 直接查询DOM中是否已存在该脚本，避免全局变量的潜在问题
    const existingScript = document.querySelector('script[src="https://embed.selly.gg"]');
    if (!existingScript) {
      const script = document.createElement('script');
      script.src = 'https://embed.selly.gg';
      script.async = true;
      script.onload = () => {
        console.log('Selly脚本加载完成');
        // 按需执行脚本初始化逻辑
      };
      document.body.appendChild(script);
    }
  }, []); // 空依赖数组 → 仅组件挂载时执行一次

  // ...其他组件逻辑
}

方案三：直接在HTML入口文件加载脚本（最省心） #

如果这个脚本是整个项目通用的，最简单的方式就是直接在项目的public/index.html里添加脚本标签：

<!-- 放在body标签末尾，不阻塞页面渲染 -->
<script src="https://embed.selly.gg" async></script>

这样脚本会在页面加载时只加载一次，只要你的ShopItem按钮的data属性正确（注意你的代码里data-selly-product-{product.id}是语法错误，应该写成data-selly-product={product.id}或者data-selly-product-id={product.id}，具体要看脚本的要求），脚本通常会通过事件委托自动绑定后续动态生成的元素。

关于动态元素绑定的补充 #

如果脚本本身不支持动态元素绑定（只在加载时绑定一次现有元素），那你需要在组件挂载后手动调用脚本的初始化方法，比如：

script.onload = () => {
  // 假设脚本提供了绑定产品按钮的方法
  if (window.Selly?.bindProductButtons) {
    window.Selly.bindProductButtons();
  }
};

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