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')
);

- curv

Answer 1

React只是视图层，它不涉及太多数据获取的问题，这些都由你自己来处理。我使用jQuery的AJAX功能以便使用，但你可以使用任何 AJAX库。

从你提供的代码来看，你做得一切都正确。你正在等待组件挂载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));

然后将侦听器绑定到该变量。

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

- Enijar

---

非常感谢，像所有不断发展的框架一样，文档非常混乱。 - curv

Answer 2

使用React状态

如果您正在使用普通的React状态来处理数据（我建议不要这样做），那么您的方法是可以的。KISS（保持简单和愚蠢）。

Make AJAX call --> In success callback, update state

使用Redux

您正在寻找Redux Thunk模块。它允许您以异步方式分派操作。

Redux操作应该是同步的。但我们可以使用一个强大的redux功能称为中间件来实现异步操作。因此，想法是创建一个操作创建器，返回一个操作并在承诺上进行分派。

阅读有关redux文档中间件的更多信息。

- Ateev Chopra

---

看起来他们并没有使用Redux。 - brbcoding

谢谢，我会研究一下这个 - 对我来说似乎是下一个级别。 - curv