gpt4 book ai didi

javascript - 如何在服务器上渲染异步初始化的组件

转载 作者:行者123 更新时间:2023-12-03 13:09:55 25 4
gpt4 key购买 nike

我对 ReactJS 比较陌生,并且被实现服务器端渲染以减少“发布第一条推文的时间”的简便性所吸引。我正在运行一个 Node-Express-React 堆栈,它使用 React 的 renderComponentToString 在服务器上预渲染标记。

当组件可以同步渲染时它工作得很好,但是在实现 ajax 填充的组件时我很挣扎(但这适用于组件初始化期间的任何异步操作,例如 websocket)。

以 React 网站为例:http://facebook.github.io/react/tips/initial-ajax.html

componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));

它在服务器上不起作用,因为使用 renderComponentToString 时永远不会触发 componentDidMount。这个简单的情况可以通过在客户端和服务器上使用相同的 HTTP 请求包装器(而不是使用 jQuery 的 $.get)来解决,并在实例化组件之前预取数据并将其作为 prop 传递。

但是,在实际的复杂应用程序中,异步依赖关系可能会变得非常复杂,并且预取并不真正适合构建 React 结构的后代方法。如何在 React 中实现异步初始化模式,无需实际安装任何东西即可在服务器上渲染(即没有 PhantomJS 那样的 DOM 模拟,这就是使用 renderComponentToString 的全部意义)?

最佳答案

我相信最实用的方法是为预加载的数据创建一个可选的 prop,如下所示:

getInitialState: function() {
if (this.props.initialLastGist) {
var lastGist = this.props.initialLastGist;
return {
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
};
} else {
return {};
}
},

componentDidMount: function() {
if (!this.props.initialLastGist) {
$.get(this.props.source, function(result) {
var lastGist = result[0];
this.setState({
username: lastGist.user.login,
lastGistUrl: lastGist.html_url
});
}.bind(this));
}
},

通过这样的设置,如果存在预加载的数据,则可以立即渲染组件;否则AJAX请求将在挂载时发送。

目前,服务器渲染始终是同步的,并且不会在服务器上调用 componentDidMount,因为它通常涉及 DOM 操作。抱歉,我现在没有更好的解决方案,但一般来说,您希望最大限度地减少对服务器的 HTTP 请求数量,因此值得仔细考虑您的架构,以便您可以收集服务器上所需的所有数据。

关于javascript - 如何在服务器上渲染异步初始化的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20815423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com