gpt4 book ai didi

javascript - SSR React应用程序的渲染过程和异步代码执行

转载 作者:行者123 更新时间:2023-12-03 02:33:18 24 4
gpt4 key购买 nike

当我用react做SSR时,发送给客户端的内容是如何构造的?

  • 它是否等待异步操作完成?
  • 是否等待状态树中的所有组件是否以某种方式保持稳定?
  • 它会在某些生命周期方法中等待异步代码,例如用 await/async 代码修饰的 componentWillMount() ... 吗?
  • 如果我将一些异步代码包装到 Promise 中并调用它的回调函数 setState - 是否会考虑此更改?

最佳答案

这将是一个简单的 html 作为字符串,来自:

ReactDOMServer.renderToString(element)

并应在浏览器上呈现。剩下的所有从 html 加载的 js 包将在加载时超过您的应用程序。这是常规的 react 包:

<script src="/react-bundle.js"></script>

所以服务器渲染的 html 将是这样的:

<html>
<head>
...
</head>
<body>
<div id="root">
// your server rendered html string shows up here
</div>
<script src="/react-bundle.js"></script>
</body>
</html>

Promise 和异步代码不会成为此呈现的 html 的一部分,但如果您需要添加它,这将需要一些额外的技巧。componentWillMount 中的代码将被执行并包含在服务器渲染的字符串中,但是在组件安装后触发的方法(如 componentDidMount)不会对服务器渲染的字符串产生影响。

关于javascript - SSR React应用程序的渲染过程和异步代码执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48644707/

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