在React中有一个renderToString和renderToStaticMarkup.
据我所知,renderToString保留了所有的react-id属性,这使得加载速度变慢.那么什么时候使用renderToString实际上更好？
Div*_*ani 28
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 带来额外成本时。 |
renderToString() 当你想在服务器上预渲染并最终在客户端上运行相同的React代码时,重新使用从服务器标记生成的DOM而不是从头开始渲染.
以这种方式呈现的顶级组件包括校验和,初始客户端呈现可用于确定它将生成的DOM与从服务器发送的DOM匹配.
| 归档时间： |
|
| 查看次数： |
2693 次 |
| 最近记录： |