react 如何引用script
在 React 中引用外部脚本
React 提供了多种方式引用外部脚本，具体方法取决于项目需求和技术栈。以下是几种常见方法：
使用 script 标签直接引入
在 public/index.html 文件中直接添加 script 标签，适用于全局脚本或第三方库：
<script src="https://example.com/script.js"></script>动态加载脚本
通过 useEffect 动态加载脚本，避免重复加载并控制生命周期：
import { useEffect } from 'react';
function App() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://example.com/script.js';
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
}使用 react-helmet 管理头部脚本
通过 react-helmet 组件在特定页面动态添加脚本：
import { Helmet } from 'react-helmet';
function Page() {
return (
<Helmet>
<script src="https://example.com/script.js" />
</Helmet>
);
}通过 npm 安装的库
对于已发布到 npm 的库，推荐通过 import 引入：
import Library from 'library-name';注意事项
- 动态加载脚本时需处理加载状态和错误情况。
- 避免在组件渲染过程中直接操作 DOM。
- 考虑脚本的依赖关系和加载顺序。
- 对于现代模块化开发，优先选择 npm 包而非全局脚本。
