我有一个简单的React网站，当我在Chrome中转到"查看源代码"时，它没有显示太多标记。主要是JS导入。 但是，如果我单击带有开发工具的元素，它会像我通常看到的那样向我显示 html。 有人可以向我解释一下吗？ 谢谢
视图源代码将包含您在build/index.html或public/index.html中的内容
索引.html将有一些<script>标签。浏览器在脚本标记中执行这些 JavaScript 文件并呈现页面。我们可以将其称为动态代码或运行时生成的html，css和其他代码。
因此，View Source将仅显示静态内容，即索引.html中的内容。这与您在记事本等任何编辑器中打开索引.html相同。
与使用开发工具一样，您将看到所有运行时生成的代码。这就是开发工具所要做的事情。
如果你需要查看 React 组件、状态、道具和其他细节，你需要使用 React 开发工具进行 chrome。
一个简单的例子是：
索引.html
<html>
<body>
<div id="app"></div>
<script>
document.getElementById("app").innerHTML = "Hello World";
</script>
</body>
</html>
您将在查看源代码中看到上述代码。
您将在开发工具中看到以下代码
<html>
<body>
<div id="app">Hello World</div>
<script>
document.getElementById("app").innerHTML = "Hello World";
</script>
</body>
</html>
希望这是清楚的。
实际的源代码主要是JS，介于反应使用的库，导入的库和编写的JS之间。
编写视图(通常为 .jsx 格式(时，将 JS 转换为 HTML。因此，在使用库和您编写的内容的组合填充 dom 后，就可以在 DOM 中查看 html，但源代码仍然只会显示 JS。
须藤示例
例子.jsx
...
render() {
const example = ['a', 'b', 'c'];
return ( <div> { example.map((val) => (<p>{val}</p>)) } </div> }
}
...
源
...
require('example.js')
...
DOM
...
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
...