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

Question

在使用Reactjs的同构应用程序中,您需要将在服务器上呈现的相同初始状态传递给客户端(然后将使用事件绑定等来"补充"应用程序).

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

将全局变量设置为窗口:

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

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

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

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

Answer 1

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

一个问题是,如果你有</scriptJSON,它可能允许注入或意外错误.为了防止这种情况,您可以替换<为\u003c.

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