ReactJS调用API的正确方法

我是个新手。有人能告诉我哪种是进行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)
    });
  },

---

请告诉我哪种方法是正确的，为什么？

如果您的组件自己管理AJAX请求，那么

componentDidMount

是正确的生命周期方法

componentDidMount

被调用一次，并且在组件的生命周期中，当它被插入DOM时，只调用一次。不过，您可以将逻辑分解为单独的方法：

componentDidMount() {
    this._serverRequest();
}

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

我在方法名称前面放了一个

\uu

，以表示其私有可见性。虽然JS中没有方法可见性支持，但是

\uuuz

是一种将方法标记为不应从外部调用的方法的约定。对于

React

组件，应该向消费者公开的唯一公共API是一组

道具

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

但是，在实际应用程序中，通常最好将所有业务逻辑和所有服务器端通信都保留在组件之外。使用
React
纯粹用于呈现，并使用框架或设计模式，如
redux
或
flux
来管理应用程序状态。
如果您的组件自己管理AJAX请求，那么
componentDidMount
是正确的生命周期方法
componentDidMount
被调用一次，并且在组件的生命周期中，当它被插入DOM时，只调用一次。不过，您可以将逻辑分解为单独的方法：

componentDidMount() {
    this._serverRequest();
}

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

我在方法名称前面放了一个
\uu
，以表示其私有可见性。虽然JS中没有方法可见性支持，但是
\uuuz
是一种将方法标记为不应从外部调用的方法的约定。对于
React
组件，应该向消费者公开的唯一公共API是一组
道具

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

但是，在实际应用程序中，通常最好将所有业务逻辑和所有服务器端通信都保留在组件之外。使用
React
纯粹用于渲染，并使用类似
redux
或
flux
的框架或设计模式来管理应用程序状态。
我很困惑，为什么我们要使用jquery来进行ajax调用？如果react本身提供serverRequest方法来调用ajax@ShinoyBabu:React默认情况下不会在
React.Component
上提供
serverRequest
方法。您不需要使用jquery—您可以使用纯JS，您可以使用polyfill进行
获取
，您可以使用任何您选择的—但是您确实需要自己编写Ajax加载逻辑。我很困惑，为什么我们要使用jquery进行Ajax调用？如果react本身提供serverRequest方法来调用ajax@ShinoyBabu:React默认情况下不会在
React.Component
上提供
serverRequest
方法。您不需要使用jquery—您可以使用纯JS，您可以使用polyfill进行
fetch
，您可以选择任何方式—但您确实需要自己编写Ajax加载逻辑。