像componentDidUpdate这样的事件，但只触发一次

Question

我有一些组件，一旦他们的数据第一次到达并呈现就应该做一些工作，但不会用于将来的重新渲染。例如：加载并呈现评论，现在1.加载社交媒体库，然后加载一些Google Analytics。

现在我这样做：

componentDidUpdate: function (prevProps, prevState) {
    if (this.hasAlreadyUpdatedOnce) {
        // ... do some stuff...
    } else {
        // ... do some stuff that should happen only once...
        // 1. load social media libraries
        // 2. load some Google Analytics
        this.hasAlreadyUpdatedOnce = true;
    }
}

但是我问自己，是否有比设置这样的财产更优雅的方式。

Answer 1

你想要componentDidMount()。 Details here.

Answer 2

假设您正在响应状态更改，则应将回调作为setState的第二个参数传递。

componentDidMount: function(){
  ajaxyThing(function(data){
    this.setState({data: data}, function(){
      // this.state is updated, the component has rerendered 
      // and the dom is current
    });
  }.bind(this));
}

Answer 3

ajax调用完成后，您是否尝试更新状态？ 或者，您可以为componentShouldUpdate返回false，并且一旦ajax调用promise已解析call forceUpdate。

Answer 4

我不能给你一个确定的答案，因为我不知道你的ajax调用是在父组件还是子组件中，但无论哪种方式，你都应该能够利用shouldComponentUpdate()来实现你的目标。如果您真的不希望在ajax调用进入后更新组件，那么您可以执行以下操作：     shouldComponentUpdate（）{       返回false;     }

然后当您的ajax调用返回时，只需运行this.forceUpdate()。返回false将使您的组件永远不会更新，除非您运行this.forceUpdate()。然而，这不是问题的最佳解决方案，如果没有更多信息，我就无法提供更好的解决方案。

Answer 5

React docs就如何使用isMounted()处理此问题提供了一个很好的示例。

  如果将组件呈现到DOM中，则

isMounted()返回true，   否则是假的。您可以使用此方法来保护异步调用   到setState()或forceUpdate()。

示例

首先，在`getInitialState（）＆＃39;：

中初始化状态变量

getInitialState: function() {
  return {
    username: '',
    lastGistUrl: ''
  }
}

在componentDidMount()中进行ajax调用（本例中为$.get），然后重新设置状态变量：

componentDidMount: function() {
  $.get(this.props.source, function(result) {
    var lastGist = result[0];
    if (this.isMounted()) {
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }
  }.bind(this));
}