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

Posted

技术标签:

【中文标题】JSON对象与窗口变量,用于使用reactjs传递服务器端呈现的初始状态【英文标题】:JSON object vs window variable for passing server-side rendered initial state using reactjs 【发布时间】:2015-02-24 12:06:53 【问题描述】:

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

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

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

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

或将其作为 JSON 对象传递:

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

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

【问题讨论】:

对我来说,他们俩看起来都非常奇怪和丑陋。我设计我的 React 组件的方式是,它们可以在初始状态为空的情况下很好地呈现,并在服务器发回最终数据时更新它。 【参考方案1】:

我喜欢创建一个启动函数来启动服务器和浏览器。在浏览器端,我将初始状态对象渲染为参数:

<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/s-s-r-demo-kit

【讨论】:

【参考方案2】:

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

一个问题是,如果您的 JSON 中有 &lt;/script,它可能会导致注入或意外错误。为了防止这种情况,您可以将&lt; 替换为\u003c

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

【讨论】:

以上是关于JSON对象与窗口变量,用于使用reactjs传递服务器端呈现的初始状态的主要内容,如果未能解决你的问题,请参考以下文章

Redux - ReactJS 应用程序不会重新渲染(尽管 JSON.parse 用于新对象)

如何使用 ReactJS 通过我的 React-Router 传递数据?

REACTJS 使用 fetch 通过 const 传递变量

React JS - 如何将变量(参数)传递给 API URL?

将大型 JSON 对象传递到新窗口中的另一个页面。

使用 GET 路由将变量从 ReactJS 前端传递到 NodeJS 后端