Question

我对ReactJS很安静。任何人都可以建议我进行AJAX调用的正确方法是什么？目前我正在使用

this.serverRequest = $.get(this.props.source, function (result) {
        console.log("after serverRequest");           
    }.bind(this));

但是我在教程中看到了很多样本

componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

请建议我哪种方法正确？为什么？

Answer 1

如果您的组件本身管理AJAX请求，componentDidMount是执行此操作的正确生命周期方法。 componentDidMount被调用一次，在组件的生命周期中只被调用一次，当它被插入到DOM中时。不过，您可以将逻辑分解为单独的方法：

componentDidMount() {
    this._serverRequest();
}

_serverRequest() {
    /* your AJAX code here */
}

我在方法名称前加上_来表示其私有可见性。虽然JS中没有方法可见性支持，但_是一种将方法标记为不应从外部调用的方法。对于React组件，应向消费者公开的唯一公共API是一组props。

要记住一件重要的事情：如果您的组件已卸载，例如在Ajax请求返回之前从DOM中删除，您将收到错误，因为您将尝试setState()在不再存在的组件上。虽然有一些安全检查可以防止这种情况，但通常是一种不推荐的模式。您应该尝试在更高级别的组件上管理所有AJAX请求，这在组件应用程序生命周期中永远不会被删除。如果您坚持使用支持Ajax的低级组件（例如，具有服务器端搜索的智能型组件），则最好在不需要时使用style={{display: 'none'}}隐藏它们，而不是删除它们DOM。这不仅避免了这种与Ajax相关的错误，而且还避免了任何不必要的重复Ajax请求（每次将组件新插入DOM时都会调用componentDidMount）。

但是，在实际应用程序中，通常最好将所有业务逻辑和所有服务器端通信保留在组件之外。仅使用React进行渲染，并使用redux或flux等框架或设计模式来管理应用程序状态。

ReactJS调用API的正确方法

1 个答案: