如何在服务器上呈现异步初始化的组件

 紫猫1_696_267 发布于 2023-02-07 18:08

我对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中实现异步初始化模式,可以在服务器上呈现而不实际安装任何东西(即没有DOM模拟和PhantomJS,这是使用renderComponentToString的全部意义)?

撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有