同构渲染 | React 和 Webpack 小书

React Js 最伟大的地方是它也可以运行在服务端，不过这不意味着你可以创建任何一个应用然后运行在服务端，你需要做一些决策和架构。原因是哪怕 React JS 和一些组件可以在服务端运行，但还是有一些组件中的依赖不能在服务端运行。

注入状态

一个重要的事情是应用需要通过顶层组件把状态注入，这意味着你的组件没有了任何的外部依赖，他们只能通过注入的状态来获取信息。

这本小书不是主要讲同构渲染的应用，不过让我们来看一下例子，我们这次不使用 ES6 语法了，因为 Node JS 还不完全支持。

main.js (client)

var React = require('react');
var AppState = require('./client/AppState.js');
var App = require('./App.js');

React.render(<App state={AppState}/>, document.body);

router.js (server)

var React = require('react');
var App = require('./App.js');
var AppState = require('./server/AppState.js');
var index = '<!DOCTYPE html><html><head></head><body>{{component}}</body></html>';

app.get('/', function (req, res) {
  var componentHtml = React.renderToString(App({state: AppState}));
  var html = index.replace('{{component}}', componentHtml);
  res.type('html');
  res.send(html);
});

所以这是一个非常初级且简单的例子来展示它，不过你需要注意的是我们在客户端和服务端使用了同一个 App.js，但是我们需要两种方式来提供状态。