ReactJS 加载有状态数据，优化答案

【问题标题】：ReactJS loading stateful data, optimisationsReactJS 加载有状态数据，优化
【发布时间】：2016-06-14 12:22:11
【问题描述】：

我是 ReactJS 的新手，并在 Django Rest Framework (DRF) 中使用它

def MyModel(model):
    ...
    status = ChoiceField(['new', 'in progress', 'completed'...])

在我的应用程序中，每个州都有单独的部分。所以需要对数据进行分离。我的问题是有很多不同的州，大约 6 或 7 个。

所以我为每种状态使用不同的路线。 /new, /inprogress 等。但这会导致每次大约 7 个请求，而不是只有 1 个。

loadMymodelsFromServer: function () {
    this.loadNewMymodelsFromServer();
    this.loadAssignedMymodelsFromServer();
    this.loadAllocatedMymodelsFromServer();
    this.loadDraftMymodelsFromServer();
    this.loadPublishedMymodelsFromServer();
    this.loadArchivedMymodelsFromServer()
    this.loadSponsoredMymodelsFromServer();
    this.loadCurrentUserMymodelsFromServer();
},

loadNewMymodelsFromServer: function() {
    var url = this.props.url + "/new/";
    $.ajax({
        url: url,
        dataType: 'json',
        cache: false,
        success: (function (data) {
            this.setState({ new_mymodels: data });
        }).bind(this),
        error: (function (xhr, status, err) {
            console.error(url, status, err.toString());
        }).bind(this)
    });
},

数据必须刷新几次，比如删除操作和更新操作，因为 JS 数组不能很好地支持这些操作。

在一个巨大的请求中加载所有未排序的数据并在 JS for 循环中对其进行排序会更好吗？

感觉不对，因为我知道数据库是为查询这样的参数而优化的，而不是 Javascript，所以我做错了什么？

【问题讨论】：

"JS 数组不能很好地支持这些操作。" - 拼接一个 JS 数组并就地更新（通常以 _micro_seconds 为单位）几乎总是更快，而不是进行网络调用以重新获取数据（通常以 10 或 100 秒为单位） _milli_seconds)。
这是真的，但不管怎样，这个系统使用轮询来实时更新它最终会使用套接字，但无论哪种方式，仍然需要网络调用
您是否有任何理由不只是有一个 Ajax 调用来运行所有查询并返回一个包含所有结果的对象，这样您就可以只进行一次调用而不是 7 个？
我是否必须将单数响应设为 [{queryset_one_objects},...,{queryset_seven_objects}] 或者有没有办法在一个 ajax 调用中对不同的 url 进行 7 次查询？
这将是一个奇异的回应。您的服务器端处理程序可以只调用 7 个现有查询并将结果收集到单个对象中。

标签： javascript python django reactjs django-rest-framework

【解决方案1】：

您可以只进行一次 ajax 调用，将所有 7 个结果作为单个对象返回，而不是进行 7 个单独的 ajax 调用。

新的 ajax 调用的服务器处理程序可以调用其他 7 个查询并将结果收集到单个对象中。

这是服务器的一些伪代码：

function megaQueryHandler() {
    var result = {
       query1Data: query1Handler(),
       query2Data: query2Handler(),
       ...
    };

    return result;
}

然后你的客户可以只调用这个“大型查询”。

【讨论】：