Question

在使用Reactjs的同构应用程序中，您需要将在服务器上呈现的相同初始状态传递给客户端（然后使用事件绑定等对应用程序“重新水化”）。

我已经看到了两种将这种初始状态传递下去的方法 -

将全局变量设置为窗口：

<script>
window.initialState = {{JSON.stringify(initialState)}} ;
</script>

或者将其作为JSON对象传递：

<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script>

两者都可以从应用程序的任何位置轻松检索。使用一个优于另一个是否有任何好处？

Answer 1

后者避免了全局变量，前者避免了DOM查找。我会选择前者，因为它需要更少的代码。

一个问题是，如果您的JSON中有</script，则可能允许注入或意外错误。为防止出现这种情况，您可以将<替换为\u003c。

<script>
window.initialState = {{
    JSON.stringify(initialState).replace(/</g, '\\u003c')
}}; 
</script>

Answer 2

我喜欢在服务器和浏览器中创建一个启动功能。在浏览器端，我将初始状态对象渲染为参数：

<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

JSON对象与窗口变量，用于使用reactjs传递服务器端呈现的初始状态

2 个答案: