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

Question

在使用 Reactjs 的同构应用程序中，您需要将在服务器上呈现的相同初始状态向下传递给客户端(然后客户端将使用事件绑定(bind)等“补充”应用程序)。

我见过两种传递初始状态的方法——

为窗口设置一个全局变量:

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

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

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

两者都可以从应用程序的任何位置轻松检索。使用一个比另一个有什么优势吗？

Answer 1

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

一个问题是如果你有</script在您的 JSON 中，它可能允许注入(inject)或意外错误。为防止这种情况，您可以替换 <与 \u003c .

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