如何在服务器上呈现异步初始化的组件
我对ReactJS相对比较陌生，并且已经被实现服务器端渲染以减少“第一条推文的时间”的简单性所吸引。我正在运行一个Node-Express-React堆栈，它使用React的renderComponentToString在服务器上预先呈现标记。
当组件可以同步呈现时，它可以工作得很好，但是当涉及到实现ajax填充的组件时，我会遇到困难(然而，这适用于组件初始化期间的任何异步操作，例如websocket)。
以React网站上的例子为例：http://facebook.github.io/react/tips/initial-ajax.html
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));它不会在服务器上工作，因为在使用renderComponentToString时componentDidMount不会被触发。通过在客户端和服务器上使用相同的HTTP请求包装器(而不是使用jQuery的$.get)，以及在实例化组件并将其作为属性传递之前预取数据，可以解决这个简单的问题。
然而，在一个实际的、复杂的应用程序中，异步依赖关系可能会变得非常复杂，并且预取并不真正适合构建React结构的后代方法。我如何在React中实现异步初始化模式，该模式可以在服务器上呈现，而不需要实际挂载任何东西(例如，没有像PhantomJS那样的DOM仿真，这就是使用renderComponentToString的全部意义)？
回答 3
Stack Overflow用户
发布于 2013-12-29 01:54:57
我认为最实用的方法是为预加载的数据创建一个可选的道具，如下所示：
getInitialState: function() {
if (this.props.initialLastGist) {
var lastGist = this.props.initialLastGist;
return {
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
};
} else {
return {};
}
},
componentDidMount: function() {
if (!this.props.initialLastGist) {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
}
},使用这样的设置，如果存在预加载的数据，则可以立即呈现组件；否则，将在挂载时发送AJAX请求。
目前，服务器呈现始终是同步的，并且不会在服务器上调用componentDidMount，因为它通常涉及DOM操作。很抱歉，我现在没有更好的解决方案，但一般来说，您希望最小化对服务器的HTTP请求的数量，因此值得仔细考虑您的体系结构，这样您就可以收集服务器上所需的所有数据。
Stack Overflow用户
发布于 2014-05-07 11:04:58
您可以查看react-quickstart项目，该项目使用react-async并附带了一个服务器呈现示例。react-async提供了一个经过修饰的renderComponentToString方法，该方法预取异步状态并将其呈现为初始标记。但是，您需要将异步状态与“常规”状态分开指定。
Stack Overflow用户
发布于 2016-07-04 18:25:28
您可以查看react-nexus (https://github.com/elierotenberg/react-nexus)，它可以帮助您提前声明所有的异步依赖项。
但是我意识到react-nexus是你自己对这个问题的答案，所以你可能已经找到了！
https://stackoverflow.com/questions/20815423
复制相似问题