-1

我已经开始学习 React 服务器端渲染。然后我配置“ index.js ”文件如下：

const express = require('express');
const app = express();
const React  = require('react');
const renderToString = require('react-dom/server').renderToString;
const Home = require('./client/components/home').default;

app.get('/', (req, res) => {
    const content = renderToString(<Home></Home>);
    res.send(content); // Statement1
});

app.listen(3000, ()=> {
    console.log("App listening to port 3000");
});

因此，在上面代码的 Statement1 中，我们从“Home”组件返回字符串（因为“renderToString”将 HTML 转换为字符串。

当我检查 DOM 时，我得到以下代码：

<html>
<head></head>
<body cz-shortcut-listen="true">
<div data-reactroot="">I'm home component</div>
</body>
</html>

所以，我的问题是浏览器如何将 HTML 字符串（作为服务器的响应接收）转换为 DOM 元素，以及如何<body>添加这个“”标签？

4

1 回答 1

0

鉴于cz-shortcut-listenbody 开始标签上有一个属性，我会假设它是由renderToString而不是浏览器添加的。

通过查看服务器端代码的顶层和 DOM 检查器而不查看生成的 HTML 源代码来得出这个结论是一个飞跃。

（在进一步阅读之后，似乎该属性是由您安装的插件添加的。不过，我关于实际查看 HTML 源代码的观点仍然存在）。

浏览器将遵循解析 HTML 文档的规范，其中包括处理带有标记省略规则的元素（如body 元素）的规定。

它将以“before html”插入模式开始，找到一个 div 开始标签并点击：

创建一个 html 元素，其节点文档是 Document 对象。将其附加到 Document 对象。将此元素放入打开元素的堆栈中。

将插入模式切换为“before head”，然后重新处理令牌。

然后这将触发 head 元素的创建等等。

于 2021-05-10T09:35:19.347 回答