第1部分

纯 JavaScript 与 SSE 流

在这个简单的 HTML 替换用例中，Vue 并没有真正增加太多价值，而且它根本不会为 SSE 示例增加任何价值，因此我们将直接使用原生 JavaScript 实现它。这是一个流选项卡

<div class="tab-pane fade" id="stream" role="tabpanel">
	<div class="container">
		<div id="load"></div>
	</div>
</div>

以及一些用于填充它的 JavaScript 代码

<script type="module">
	var events = new EventSource("/stream");
	events.onmessage = e => {
		document.getElementById("load").innerHTML = e.data;
	}
</script>

使用 React 的动态内容

大多数使用 React 的人可能不仅仅做一些逻辑处理，最终会在 JavaScript 中完成所有布局和渲染工作。您不必这样做，而且只需使用少量 React 即可轻松上手。您可以就此止步，将其用作实用程序库，也可以发展为完整的 JavaScript 客户端组件方法。

我们可以在不做太大改动的情况下开始尝试一下。如果您想查看，示例代码最终看起来会像 `react-webjars` 示例。首先是 `pom.xml` 中的依赖项

<dependency>
	<groupId>org.webjars.npm</groupId>
	<artifactId>react</artifactId>
	<version>17.0.2</version>
</dependency>
<dependency>
	<groupId>org.webjars.npm</groupId>
	<artifactId>react-dom</artifactId>
	<version>17.0.2</version>
</dependency>

以及 `index.html` 中的模块映射

<script type="importmap">
	{
		"imports": {
			...
			"react": "/npm/react/umd/react.development.js",
			"react-dom": "/npm/react-dom/umd/react-dom.development.js"
		}
	}
</script>

React 尚未打包为 ESM 包（无论如何），因此没有“模块”元数据，我们必须像这样硬编码资源路径。“umd”在资源路径中指的是“通用模块定义”，这是对模块化 JavaScript 的较旧尝试。它足够接近，如果您眯着眼睛看，可以用类似的方式使用它。

有了这些，您可以导入它们定义的函数和对象

<script type="module">
	import * as React from 'react';
	import * as ReactDOM from 'react-dom';
</script>

因为它们并不是真正的 ESM 模块，所以您可以在 HTML `