分享个人 Full-Stack JavaScript 项目开发经验
在某些情况下，我们需要在 React 应用程序中使用第三方脚本库，而这些脚本库并不符合 npm 规范，我们需要通过 script 标签加载到应用中。为了不影响应用程序的加载体验，我们只想在相关组件中加载这些脚本。一般做法可以通过动态创建 script 标签实现，而react-load-script库可以帮助我们方便地实现。本文将介绍它的使用和注意问题。
安装 react-load-script。
yarn add react-load-script使用例子如下：
import React from 'react';
import Script from 'react-load-script';
class Example extends React.Component {
onloadButNotMount = false;
isMount = false;
onCreate = () => {
// script 标签创建回调
};
onError = () => {
// 脚本加载错误回调
};
onLoad = () => {
// 脚本加载完成回调
if(this.isMount) {
// 脚本加载后的初始化操作
} else {
this.onloadButNotMount = true;
}
};
componentDidMount() {
this.isMount = true;
if(this.onloadButNotMount) {
// 脚本加载后的初始化操作
}
}
render() {
<Script
url="https://examle.com/index.js"
onCreate={this.handleScriptCreate}
onError={this.handleScriptError}
onLoad={this.handleScriptLoad}
attributes={{id: 'third-part-script'}}
/>
}
}值得注意：
为了避免以上问题，我们需要在 componentDidMount 时判断脚本是否已经加载完成，完成则调用脚本。onLoad 时，判断组件是否已经挂载，因为脚本可能依赖于 DOM。