如何将反应组件注入车把模板，该模板在运行时动态加载。
答案 0 :(得分：2)
编辑：tl;博士：这是一个很棒的问题。将预渲染 React组件注入html模板语言（如手柄）可以缩短网站的加载时间，并提高搜索引擎（SEO）内容的“可索引性”。 技巧你需要服务器端渲染（SSR），并且你不想在初始请求中将所有代码加载到浏览器中，因此你需要进行代码分割。这些可以通过webpack完成。直到最近，如果没有像Next.js这样的框架，它们是不可能的...现在有3个选项，我得出的结论是唯一值得使用的是：React-Universal-Component
如果您想了解更多关于在加载JS资产，CSS assts等之前将内容呈现为HTML所带来的好处，Isomorphic or Universal Javascript上的这篇文章是一个很好的起点。编写同构/通用JavaScript是为了编写能够灵活呈现客户端或服务器端的代码。
如果React顶级API能够轻松实现这一点，并且有少量的转换/编译/捆绑库（我使用Webpack），这是必要的（如果您不想在浏览器）。
因为React组件几乎总是用JSX编写，所以必须先将它们转换为JavaScript才能呈现它们。这通常通过ReactDOM.render()完成，我们会为React.createElement()致电。{/ p>
React还有一个函数ReactDOMServer.renderToString()，它接受React元素，构建HTML（在服务器端）并将其转换为字符串。这使我们能够将预渲染的React注入到html模板中。
有关我刚才描述过程的示例，请参阅此example，但现在已经过时了。
结论：将React组件注入手柄模板是不值得的，因为有 finally 库来帮助我们这样做（请参阅我的第一个链接）。 IMO SSR React对于需要SEO优势的网站非常重要，如果您的应用正确执行SSR和代码分割，它还可以缩短您的加载时间（特别是在功率不足的设备上）。