每次安装任何组件时如何刷新脚本？

Question

我正在使用一些具有动画效果的 jQuery 脚本。由于它具有动画效果，无论何时在页面上呈现某些内容，都必须一次又一次地工作，因此也应该刷新 jQuery 脚本。但问题是 jQuery 脚本没有刷新。这是我的路由器：export default () => (  <div>    <Menu />    <Switch>      <Route        exact path="/"        render={({ staticContext, match }) => {          const site = staticContext            ? staticContext.site            : location.hostname.split(".")[0]          return <UniversalComponent site={site} match={match} page="core/Home" />        }}      />...如您所见，我<Menu />在 Switch 之外有一个组件。这就是加载 jQuery 脚本的地方。class Menu extends Component {    _isMounted = false;    constructor(props) {        super(props);        this.state = {            isDataFetched: false        };        this.loadExternalScripts = this.loadExternalScripts.bind(this);    }    componentDidMount() {        this._isMounted = true;        this.loadExternalScripts().then(() => {            if (this._isMounted) {                this.setState({ isDataFetched: true });            }        });    }    componentWillUnmount() {        this._isMounted = false;    }使用“ postscribe ”库，我加载了所有必需的 jQuery 脚本。其中，脚本相关的导航切换按钮，效果很好，因为导航切换的东西与刷新与否无关。然而，与动画相关的脚本，无论何时加载任何页面都应该刷新，它们只在第一次工作，然后不再工作。因为 jQuery 只能在第一次加载菜单组件时加载。componentDidMount()当反应路由器为移动页面进行更改时，看起来菜单类没有被触发（如果触发，它将刷新 jQuery，我猜）。这就是我认为的问题，但不确定。我该如何解决这个问题？

Answer 1

componentDidUpdate 在这里会派上用场 基本上， componentDidUpdate 的作用是接受两个参数（prevProps、prevState）并在 prop 更改或状态更新时运行。

所以作为一个简单的例子，你可以在你的组件中做这样的事情

componentDidUpdate(prevProps, prevState){

// Typical usage (don't forget to compare props):

  if (prevProps.propThatReceiveChanges !== this.props.propThatReceiveChanges){

  this.loadExternalScripts().then(() => {

        if (this._isMounted) {

            this.setState({ isDataFetched: true });

        }

    });

} }

笔记

componentDidUpdate（）如果将不会被调用shouldComponentUpdate（）返回false。