Question

我是React的新手。我已经完成了教程，梳理了几个示例应用程序，并花了一些时间编写一些基本的应用程序。但我还是很困惑......

在经历了所有这些之后仍然困扰着我的是我仍然不明白如何（如果？）应该使用React将数据推送回服务器。显然没有像Angular这样的数据绑定，能够使用Virtual DOM基于更改服务器端数据更新页面非常棒......但是如何使用React来更新服务器上的数据？我不是在寻找教程。

在jQuery（ajax）中，我可以在不进行页面刷新的情况下将数据推送到服务器。我可以使用React吗？所有的例子都很可爱（嘿，我可以点击这个计数器按钮和一个数字增量！嘿，我可以通过这个输入添加一个“注释”，它在页面上呈现！），但是这些数据如何保存在后端？持久性数据是没有页面刷新的东西吗？我没有看到通过jQuery（例如）使用React用于此用例获得了什么。

我可能错过了一些简单的东西，一个简单的答案将非常感激。

Answer 1

在我之前的一个项目中，我们使用jQuery来执行对服务器的POST请求。我们将捕获响应并在成功时更新对象的状态，以便DOM反映更改。

你必须记住，React所需的心态与Angular或Ember不同。顺便说一下，我强烈建议你看看Pete Hunt的这个演讲https://www.youtube.com/watch?v=-DX3vJiqxm4，他在Angular / Ember / React之间经历了一些差异，它改变了我理解React的方式。

Answer 2

React只是视图层，因此您需要自己处理应用程序的其他部分。

我个人使用的superagent也是available on npm。

为了更好地管理API，我将其包装到Service API类中，然后将其与promise一起使用，如下例所示

/* APIService.js */

var Q = require("q");
var Request = require("superagent");

//TODO: Define _urlPrefix, resource

module.exports = {

        get: function(id, params) {

            var deferred = Q.defer();

            var url = _urlPrefix+"/"+resource+"/"+id;

            Request
                .get(url)
                .set('X-Requested-With', 'XMLHttpRequest')
                .query(params)
                .end(function(res) {

                    if (res.status == 200) {
                        deferred.resolve(res.body);
                    } else {
                        deferred.reject(res.body);
                    }

                })
            ;

            return deferred.promise;

        }

        /* Other functions for POST, DELETE, PUT */

};

使用React.js更新服务器状态？

2 个答案: