javascript - ReactJS AJAX 最佳实践

Question

我目前正在尝试学习 ReactJS，但找不到任何一致的文档(即使是官方文档看起来也有点乱)，尤其是围绕 AJAX，它们似乎有点拼凑在一起。我最终使用了 JQuery $.get 方法，这看起来有点作弊。

我有下面的代码，但只是想知道是否有更简洁的方法来处理简单的 AJAX 调用？我还在 componentDidMount 中触发它，这似乎是最合乎逻辑的，看看生命周期。

欢迎任何帮助!!

getInitialState: function () {
    return {
        numberOfItems: 0,
        items: []
    };
},

componentDidMount: function () {

    $('#MyContainer .loading').show();

    $.get(this.props.source, function (result) {
            var response = result.response;
            this.setState({
                numberOfItems: response.list.numberOfItems,
                items: response.list
            });
        }.bind(this))
        .done(function () {
            $('#MyContainer.loading').hide();
        });
},

render: function() {
    return(
        //Stuff here
    )
};


ReactDOM.render(
    <RecommendationsList source="/my/api/call/here"/>,
    document.getElementById('MyContainer')
);

Answer 1

React 只是 View 层。它不太关心获取数据并将其留给您。我使用 jQuery 的 AJAX 功能是为了方便使用，但你真的可以使用任何东西 AJAX library你想要的。

从您提供的代码来看，您所做的一切都是正确的。您正在等待组件挂载 componentDidMount。

关于使用多个回调保持异步 JavaScript 干净的注意事项；我会将调用分配给一个变量。

var request = $.get(this.props.source, function (result) {
    var response = result.response;
    this.setState({
        numberOfItems: response.list.numberOfItems,
        items: response.list
    });
}.bind(this));

然后将监听器绑定(bind)到该变量。

request.done(function () {
    $('#MyContainer.loading').hide();
});