React - renderToString和renderToStaticMarkup之间有什么区别

Question

在React中，有一个renderToString和renderToStaticMarkup。

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

Answer 1

renderToString()用于在服务器上预渲染并最终在客户端上运行相同的React代码时，重新使用从服务器标记生成的DOM，而不是从头开始渲染。 / p>

以这种方式呈现的顶级组件包括校验和，初始客户端呈现可用于确定它将生成的DOM与从服务器发送的DOM匹配。

Answer 2

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

与编程中的大多数事情一样，每个事情都有其权衡：

<头>

renderToString	renderToStaticMarkup
这会将一些额外的 data-react* 属性附加到生成的标记中，当您在客户端上运行 hydrate 以使页面具有交互性时，react 会使用这些属性。	生成的标记将不包含额外的 data-* 属性，它看起来像纯 HTML。您无法使这样的页面与 hydrate 交互。
由于添加了额外的属性，响应大小会更大（大小取决于页面包含的标记数量）。	响应大小会更小。
您的客户端包中需要 react 和 react-dom（用于补充和使应用具有交互性。	您不需要在客户端包中包含 react 或 react-dom（事实上，您可以在客户端没有 JS 的情况下逃脱 - 非交互式页面）。因此，您可以获得 React 构建 UI 的好处，而无需为此类静态站点添加 JS 的成本
用例 - 同构应用、服务器端渲染 Web 应用以获得更好的用户体验/性能。	用例 - 纯静态站点（您不关心交互性）、非交互性博客，当您想使用 React 编写 UI 但不希望在您的 JS 包中包含 React 时增加成本。