如何在React应用中嵌入跨路由不受重渲染影响的第三方预ES6挂件脚本？

首选方案：直接嵌入public/index.html页脚 #

直接遵循第三方要求，把脚本放在项目public目录下的index.html文件中，</body>闭合标签的前一行即可，代码结构参考：

<!-- 其他HTML内容 -->
  <div id="root"></div>
  <!-- 第三方挂件脚本 -->
  <script>// iife function here // </script>
</body>
</html>

该方案优势：

• 完全符合第三方接入要求，脚本不会被React构建工具转译，不会出现预ES6语法兼容报错
• 脚本执行上下文和React应用完全隔离，不会触发TS类型校验错误
• 挂件生成的DOM节点默认和React的#root节点平级，完全不受React路由切换、DOM重渲染影响，所有页面都可正常展示

备选方案：动态加载（适合需要控制加载时机的场景） #

如果需要避免脚本阻塞首屏加载，或者需要等React应用初始化完成后再加载挂件，可以在入口文件index.jsx/index.tsx中动态插入script标签，代码示例：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

// 动态插入第三方脚本，全局仅执行一次
const script = document.createElement('script')
script.innerHTML = `// iife function here //`
// 若为外链脚本可替换为：script.src = "第三方脚本地址"
document.body.appendChild(script)

// 遇到TS类型报错时，可补充全局类型声明，或临时加// @ts-ignore忽略校验

该方案可自定义加载时机，不会阻塞首屏HTML解析，同样不受React内部渲染逻辑影响。

不推荐的做法 #

不要尝试把脚本封装为ES模块导入，也不要直接放在App.tsx等业务组件内：

• 预ES6的IIFE脚本没有符合ES模块规范的导出内容，构建工具转译时会出现语法错误
• 放在业务组件内会受组件生命周期影响，重复渲染可能导致脚本重复执行，还会触发TS无类型定义的报错

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