如何创建自定义React Hook整合外部脚本增删逻辑

完整实现代码 #

import React from 'react';

// 定义Hook可选参数类型
type UseScriptOptions = {
  onLoad?: () => void;
};

// 工具函数：添加外部script标签
const addScript = (src: string, id: string, onLoad?: () => void) => {
  const existing = document.getElementById(id);
  if (existing) {
    return existing;
  }
  const script = document.createElement('script');
  script.src = src;
  script.id = id;
  script.async = true;
  script.onload = () => {
    onLoad?.();
  };
  document.body.appendChild(script);
  return script;
};

// 工具函数：移除指定id的script标签
const removeScript = (id: string) => {
  const script = document.getElementById(id);
  if (script) {
    document.body.removeChild(script);
  }
};

// 自定义Hook：useScript
export const useScript = (src: string, id: string, options?: UseScriptOptions) => {
  React.useEffect(() => {
    const script = addScript(src, id, options?.onLoad);
    // 组件卸载时自动移除script
    return () => removeScript(id);
  }, [src, id, options?.onLoad]);
};

使用示例 #

在React组件中直接调用：

import { useScript } from './hooks';

const MyComponent = () => {
  useScript('https://domain/js/main.js', 'my-script', {
    onLoad: () => {
      console.log('Script加载完成！');
    }
  });

  return <div>组件内容</div>;
};

核心逻辑说明 #

• 组件挂载时自动创建并插入指定script标签，若同id的script已存在则复用
• 组件卸载或依赖项（src/id/onLoad）变化时，自动移除旧script并重新创建
• 支持传入onLoad回调，监听脚本加载完成事件

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