服务器端渲染与ReactDOM.hydrate
hydrate
有landed to React 16,但它的使用尚未记录。服务器端渲染与ReactDOM.hydrate
This article表明它应该与renderToNodeStream
一起使用,但没有提供太多细节。
hydrate
的预期用途是什么?
renderToString
是同步的。它也不能处理重新渲染的组件,即当在初始渲染期间在组件状态中发生同步(即相同的节拍)变化并且应该触发额外的调用时。该示例是头盔,需要a workaround以便将嵌套Helmet
中的更改传播回服务器端的*组件。
可以hydrate
和renderToNodeStream
有助于避免renderToString
限制并在服务器端渲染异步和/或重新渲染的组件?
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
谢谢,DOM重用是一个好点。 – estus