Question

我正在为同构javascript应用程序进行POC以从服务器端呈现html。 POC正在使用简单的html，但我想进行api调用并获取json响应并发送到render函数。我试过各种各样的方法，但它没有用。你们其中一个请告诉我我失踪的地方。

我很反应js，任何帮助都会非常感激

loadCategoriesFromServer: function() {
        var self = this;

// get walking directions from central park to the empire state building
    var http = require("http");
    url = "api url here";
        var request = http.get(url, function (response) {
            // data is streamed in chunks from the server
            // so we have to handle the "data" event    
            var buffer = "", 
                data,
                route;

            response.on("data", function (chunk) {
                buffer += chunk;
            }); 

            response.on("end", function (err) {

              data = JSON.parse(buffer);

              //console.log(data.d);
              //console.log(data.d.Items);
                self.setState({
                    categories: data.d.Items
                });
            }); 
        });
    }, // load from server end

    getInitialState: function() {
        return { categories: [] };
    },

    componentWillMount: function() {
        console.log("calling load categories")
        this.loadCategoriesFromServer();
    },
render: function () {

        //console.log("data");
        //console.log(this.state.categories);

        var postNodes = this.state.categories.map(function (cat) {
          console.log(cat);
        });

        return (
          <div id="table-area">
             //i want to paint the data here..
          </div>
        )
      }

  });

Answer 1

使用componentWillMount获取组件内部不是正确的位置，以防您需要渲染服务器端。您需要以某种方式将其移出表单组件，并在获取后将实际数据作为道具传递 - 例如@JakeSendar在其答案中建议。

我有一些使用React做同构应用程序的经验，我遇到的主要问题是如何等待所有数据在首次渲染之前加载

正如评论中已经提到的@FakeRainBrigand，不仅有一种方法可以做到这一点，而且还取决于你的要求。

构建同构应用程序的方法很少，从我的角度来看，有些有趣的是：https://github.com/webpack/react-starter和http://fluxible.io/

但是，正如我自己想的那样，最优雅的方法是组织反应组件的异步渲染，特别是使用RxJS。

一般来说，我的申请结构如下：

views - 没有任何逻辑的反应组件（只是一个视图）
models - 具有当前状态的Observable（使用superagent加载初始数据，然后与其他模型和/或操作结果结合使用）。简单来说就是：

Rx.Observable.defer(fetchData).concat(updatesSubject).shareReplay()
操作（或意图） - 观察者用于收集用户输入，执行某些操作，并将操作结果分派给订阅者模型和/或其他操作。在简单的情况下，例如：

updatesSubject = new Rx.Subject();

action = new Rx.Subject(); action.switchMap(asyncRequest).subscribe(updatesSubject)
组件 - 从模型，其他组件和操作（I have a note about this, explaining how and why to create Observable React elements with RxJS）组合的Observables（虚拟DOM元素流），现在我也计划添加部分组件（元组来自：react组件，observables，观察者和属性。部分填充使用DI）
路由器 - 负责处理位置变更的组件，一般来说，主要功能是将位置更改映射到虚拟DOM元素和元信息流。但是在细节方面，我的情况有点复杂（网址生成，活动网址突出显示，导航时处理滚动，也有嵌套路线和多个视图的可能性）

所有这些都使用DI容器组装在一起，在我的情况下类似于angular2 DI container，但是根据我的具体需求进行了大量简化。

使用DI创建组件，模型和操作。

在服务器端应用程序是这样的：

var rootInjector = new Injector();
// setup server specific providers
rootInjector.provide(..., ...)

app.get('/*', function(req,res){
    var injector = rootInjector.createChild();
    // setup request specific providers
    injector.provide(..., ...);

    injector.get(Router)
       .first()
       .subscribe(function(routingResult){ 
          res.render('app', {
              title: routingResult.title,
              content: React.renderToString(routingResult.content)
          });
       });
}

在客户端类似：

var rootInjector = new Injector();
// setup server specific providers
// actually this is omitted in my case because default providers are client side
rootInjector.provide(..., ...)
contentElement = document.getElementById('#content');

rootInjector.get(Router)
   .subscribe(function(routingResult){ 
      document.title = routingResult.title;
      React.render(routingResult.content, contentElement)
   });

与flux相比，它是更具声明性和更强大的组织应用程序的方式。在同构应用程序的情况下 - 对我来说，它看起来好多了各种黑客与通量。但当然有缺点...... - 它更复杂。

稍后，我将开源所有这些，但是现在 - 还没有准备好发布。

<强> UPD1：

原始答案有点过时（后来我打算更新它），我在这方面有一些进展。

上面提到的代码的链接，已经开源：

DI容器：di1
反应组件的容器（将视图连接到可观察和障碍物）：rx-react-container
Starter模板，用于实现同构小部件，使用RxJS和React以及上面的库：Reactive Widgets

关于完整的申请（工作仍在进行中，文档不太好，但一般来说应该很清楚）：

专为异常反应应用router1构建的路由器，并对组件进行反应以使用它router1-react
包含路由器和上述所有库的应用程序模板：router1-app-template

Answer 2

React的renderToString方法（用于渲染服务器上的组件）是同步的。因此，任何类型的异步任务（例如api请求）在组件呈现时仍将处于挂起状态。

根据您是否要在服务器或客户端上获取数据，有几种方法可以解决此问题。

如果您选择在服务器上获取数据，请首先将api-request逻辑移出组件之外。然后，在回调中呈现组件，将获取的数据作为prop传递。它看起来像这样：

response.on("end", function (err) {
  var data = JSON.parse(buffer);
  var markup = React.renderToString(Component({categories: data}));
});

在您的组件内，您可以通过this.props.categories访问数据。

另一个选项是在客户端上处理api请求。您可以在componentDidMount中发出AJAX请求，并从获取的数据中设置组件的状态。它看起来与你现在的非常相似，关键的区别在于你的请求逻辑将存在componentDidMount（异步，在客户端调用）而不是componentWillMount（不是异步，在服务器上调用））。

Answer 3

你应该使用superagent，对我来说真的很好，你也错过了最重要的部分，你应该使用 flux 从服务器获取数据，flux是这样的方式facebook强烈推荐，使用flux architecture非常简单。

从反应中做出宁静的api调用

3 个答案: