服务器端渲染与ReactDOM.hydrate

hydrate有landed to React 16，但它的使用尚未记录。服务器端渲染与ReactDOM.hydrate

This article表明它应该与renderToNodeStream一起使用，但没有提供太多细节。

hydrate的预期用途是什么？

renderToString是同步的。它也不能处理重新渲染的组件，即当在初始渲染期间在组件状态中发生同步（即相同的节拍）变化并且应该触发额外的调用时。该示例是头盔，需要a workaround以便将嵌套Helmet中的更改传播回服务器端的顶级组件。

可以hydrate和renderToNodeStream有助于避免renderToString限制并在服务器端渲染异步和/或重新渲染的组件？

来源

2017-09-25 estus

hydrate的用法不限于renderToNodeStream - 您可以（实际上应该）也将其与经典renderToString一起使用。 renderToNodeStream与renderToString基本相同，只是它生成的是一个http流而不是一个字符串。这意味着您可以在渲染过程中将渲染的html发送到客户端字节，与标准renderToString相反，当您必须等待整个html字符串先呈现时，才能将其发送给客户。

ReactDOM.hydrate是标准ReactDOM.render的替代产品。基本（和唯一的区别）是，与ReactDOM.render相反，如果客户端上的React校验和与服务器上计算的校验和不匹配，则它不会丢弃所有DOM。它会尝试将React客户端应用程序连接到服务器呈现的DOM，即使存在一些细微的差异，只需修补不同的部分。

由于对renderToNodeStream流性质，头盔的服务器端使用的是库的当前状态几乎是不可能的 - 该DOM的head部分由时间发送到服务器阵营获得的计算DOM包括头盔的组件。该流不能仅恢复并将头盔的更改附加到head。

所以总结一下，回答你的问题 - renderToNodeStream解决了通过发送流同步呈现字符串的问题，但是它引入了新的问题，即如果React应用程序的某些部分需要它，则无法修补推送的内容。它不会在服务器端的状态更改和重新渲染方面添加任何内容。另一方面，hydrate没有在这个主题中引入任何新东西 - 它只是一个调整，更原谅版本的旧render。

官方文档解释了很多！ https://reactjs.org/docs/react-dom.html

来源

2017-11-09 11:08:27 jalooc

谢谢，DOM重用是一个好点。 – estus

服务器端渲染与ReactDOM.hydrate

回答

相关问题