React组件卸载时如何移除已添加的脚本？

嘿，这个问题其实很好解决，关键是要保存你动态创建的脚本元素的引用，这样在组件卸载时就能精准地把它从DOM中移除。咱们一步步来修改你的代码：

首先，在componentDidMount里把创建的脚本元素存到组件实例的属性中，比如this.scriptRef：

import React from 'react';
export default class ScriptServices extends React.Component {
  constructor(props) {
    super(props);
    // 初始化脚本引用
    this.scriptRef = null;
  }

  componentDidMount() {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = "./scriptServices.js";
    this.instance.appendChild(s);
    // 保存脚本引用，方便卸载时定位
    this.scriptRef = s;
  }

  componentWillUnmount() {
    // 检查脚本引用是否存在，存在则移除
    if (this.scriptRef) {
      // 直接调用元素自身的remove方法从DOM中移除
      this.scriptRef.remove();
      // 也可以通过父容器移除：this.instance.removeChild(this.scriptRef);
      // 清空引用，避免不必要的内存占用
      this.scriptRef = null;
    }
  }

  render() {
    return <div ref={el => (this.instance = el)}></div>;
  }
}

为什么要这么做？ #

• 如果你不保存脚本的引用，卸载时很难精准定位到你添加的那个脚本（毕竟页面上可能存在其他同src或同名的脚本）。
• 调用element.remove()会直接把元素从DOM树中彻底移除，同时还能终止脚本的加载/执行流程（如果还没完成的话）。
• 最后清空this.scriptRef是个好习惯，能避免不必要的内存泄漏风险。

额外小提示 #

如果你的脚本可能被多个组件实例引用，或者担心重复加载，可以在componentDidMount里先检查页面上是否已存在同src的脚本，再决定是否创建新的：

componentDidMount() {
  // 先检查页面中是否已有该脚本
  const existingScript = document.querySelector(`script[src="./scriptServices.js"]`);
  if (!existingScript) {
    const s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = "./scriptServices.js";
    this.instance.appendChild(s);
    this.scriptRef = s;
  }
}

这样就能确保不会重复添加相同的脚本啦～

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