纯组件的服务器端 React答案

【问题标题】：Server-side React with pure components纯组件的服务器端 React
【发布时间】：2015-10-08 05:28:14
【问题描述】：

我正在尝试构建一个符合最佳实践的同构 React 应用程序。我目前只是想为服务器找到一个好的系统。以下是我的一些要求：

要求

我想用react-router
我试图避免使用通量架构，因为它对我的简单应用程序来说太过分了
我希望我的 React 组件是纯的，因此它们不应将模型数据存储在其内部状态中
React 组件也应该不自己获取他们需要的数据，这些数据应该通过props 传递给他们
如果组件需要异步加载数据，则应在呈现之前在服务器上进行

简单示例应用程序

我做了一个小示例应用程序来说明我的问题/困惑：https://github.com/maximilianschmitt/ipman

组件树基本上是这样的：

RouteHandler
  App
    RouteHandler
      Home
      Ip

routes.js

'use strict';

const Router = require('react-router');
const App = require('./components/app');
const Home = require('./components/home');
const Ip = require('./components/ip');
const Route = Router.Route;

const routes = (
  <Route handler={App}>
    <Route name="home" path="/" handler={Home} />
    <Route name="ip" path="/ip" handler={Ip} />
  </Route>
);

module.exports = routes;

components/ip.js

class Ip extends React.Component {
  render() {
    return <div>Your ip is: {this.props.ip || 'undefined'}</div>;
  }
}

我的问题/任务是：

如果我导航到/ip，我希望服务器从http://ip.jsontest.com 请求它自己的IP 地址，以某种方式将它传递给Ip 组件，然后将所有内容呈现为一个字符串供客户端查看HTML。
我想我想避免在组件内部发出 HTTP 请求，我想通过props 传递必要的信息

我知道 alt.js 等库和其他同构通量实现通过存储的概念解决了这个问题，但我想知道这是否有点矫枉过正。

有没有一种简单的方法来添加所需的功能？

【问题讨论】：

标签： javascript reactjs reactjs-flux flux isomorphic-javascript

【解决方案1】：

基于this article from react-router，我得到了一些看起来不是那么糟糕的解决方案。你可以在这里找到结果：https://github.com/maximilianschmitt/server-side-react

【讨论】：