为两个相似的 React 应用程序使用两个不同的入口点

Question

我正在使用与 gulp 和 browserify 的反应。我正在一个网站上工作，我想在两个不同的位置（网址）嵌入反应元素。元素不同，但重用了大部分底层组件。

如果您有多个入口点，那么告诉 react、在何处渲染哪个组件的正确方法是什么？

我可以轻松创建两个不同的 js 文件并在相应页面上加载相关文件。但据我所知，这也会两次加载所有库和组件，并给服务器带来不必要的负载。

我还可以为入口点使用不同的 id 并捕获“目标容器不是 DOM 元素”。如果未找到 id，则会出现错误，但这感觉不对。

感谢您的帮助！

Answer 1

单独的 URL 是单独的 HTTP 请求，因此当有人访问任一 URL 时，页面的全部内容都会重新加载。想象一下 Chrome Web 检查器的“源”选项卡只是一种更有效地读取包含 html、css 和 javascript 的长文件的方法。React 和所有其他库都包含在任一页面的一个长文件中。

您的“创建两个不同的 js 文件并在相应页面上加载相关文件”的解决方案是正确的答案，并且不会在服务器上产生任何“不必要的负载”。

服务器过载的解决方案是通过 CDN 实现缓存和服务模块。