将React组件注入客户端的把手中

Question

如何将React组件注入在运行时动态加载的把手模板中。

Answer 1

编辑：tl;博士：这是一个很大的问题。将预渲染的 React组件注入html模板语言（如把手）中，可以缩短网站的加载时间，并改善搜索引擎（您的SEO）内容的“可索引性”。诀窍是您必须进行服务器端渲染（SSR），并且您不想在初始请求时将所有代码都加载到浏览器中，因此需要进行代码拆分。这些可以通过webpack完成。直到最近，如果没有Next.js这样的框架，它们就不可能实现……现在有3种选择，而我得出的结论是，唯一值得使用的是：React-Universal-Component

如果您想了解更多关于在加载JS资产，CSS资产等之前将内容呈现为HTML所获得的好处的信息，那么有关同构或通用Javascript的这篇文章是一个不错的起点。编写同构/通用JavaScript是关于编写具有呈现客户端或服务器端能力的灵活代码。

如果有几个React React顶级API可以做到这一点，那么还有一些必要的转译/编译/捆绑库（我使用Webpack）（如果您不想在浏览器中编译模板）。

由于React组件几乎总是用JSX编写的，因此必须先将它们转换为JavaScript才能呈现。通常这样做ReactDOM.render()会要求React.createElement()我们。

React还有一个函数，ReactDOMServer.renderToString()该函数接受React元素，构建HTML（在服务器端）并将其转换为字符串。这就是使我们能够将预渲染的React注入html模板的原因。

有关我刚刚描述的过程的示例，请参见此示例，但是它已经过时了。

结论：将React组件注入到车把模板中是不值得的，因为最终有库可以帮助我们做到这一点（请参阅我的第一个链接）。IMO SSR React对于需要SEO好处的站点很重要，如果您的应用正确执行SSR和代码拆分，它也会缩短您的加载时间（尤其是在功率不足的设备上）。