在使用 Reactjs 的同构应用程序中，您需要将在服务器上呈现的相同初始状态传递给客户端（然后客户端将使用事件绑定等“重新水化”应用程序）。
我见过两种传递这个初始状态的方法——
给窗口设置一个全局变量：
<script>
window.initialState = {{JSON.stringify(initialState)}} ;
</script>
或者将其作为 JSON 对象传递：
<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script>
两者都可以从应用程序的任何地方轻松检索。使用一个比另一个有什么优势吗？
后者避免了全局变量，而前者避免了 DOM 查找。我会选择前者，因为它需要更少的代码。
一个问题是，如果您</script在 JSON 中有可能允许注入或意外错误。为了防止这种情况，您可以替换<为\u003c.
<script>
window.initialState = {{
JSON.stringify(initialState).replace(/</g, '\\u003c')
}};
</script>
我喜欢创建一个启动函数，在服务器和浏览器中启动。在浏览器端，我将初始状态对象渲染为参数：
<script type="text/javascript">
var app = new App();
document.addEventListener('DOMContentLoaded', function(e) {
document.removeEventListener('DOMContentLoaded');
app.start({{JSON.stringify(initialState)}});
});
</script>
在启动函数中，我为浏览器设置了类似的内容：
App.prototype.start = function(initState) {
React.render(RootComponent(initState), document.getElementById('container'));
}
在这种情况下 start() 没有做太多事情，但在完整的实现中，我还将在这里处理服务器端渲染。我对此的大部分想法来自这个演讲和例子：https : //github.com/zertosh/ssr-demo-kit