reactjs - React - renderToString 和 renderToStaticMarkup 有什么区别

Question

在 React 中，有 renderToString 和 renderToStaticMarkup。

据我所知，renderToString 保留了所有的react-id 属性，这使得加载速度变慢。那么什么时候使用 renderToString 实际上更好？

Answer 1

tl;dr - 如果您的服务器呈现的页面需要在客户端上进行交互，那么您需要 renderToString ，否则renderToStaticMarkup工作正常。

与编程中的大多数事物一样，每种事物都有其权衡:

<表类=“s-表”><标题><第> renderToString <第> renderToStaticMarkup <正文>这将附加一些额外的 data-react*生成的标记的属性，当您运行 hydrate 时，React 使用这些属性在客户端上使页面具有交互性。生成的标记将不包含额外的 data-*属性，它看起来像纯 HTML。您无法使这样的页面与 hydrate交互。 .由于添加了额外的属性，响应大小会更大(多大，取决于页面包含的标记量)。响应大小会更小。您需要 react和 react-dom在您的客户端包中(用于滋润并使应用程序具有交互性。您不需要包含 react或 react-dom在你的客户端包中(事实上，你可以在客户端没有 JS - 非交互式页面)。因此，您可以享受 React 构建 UI 的好处，而无需为此类静态站点添加 JS用例 - 同构应用程序、服务器端渲染 Web 应用程序以实现更好的用户体验/性能。用例 - 纯静态网站(您不关心交互性)、非交互式博客，当您想使用 React 来编写 UI 但不希望在 JS 包中包含 React 带来额外成本时。