使用ReactDOM.hydrate进行服务器端渲染

Question

hydrate已降落到React 16,但其使用尚未记录.

本文建议它应该与之一起使用,renderToNodeStream但不会提供太多细节.

预期用量是hydrate多少？

renderToString是同步的.它也无法处理重新渲染的组件,即在初始渲染期间在组件状态中发生同步(即相同滴答)变化并且应该触发其他render调用.示例是Helmet,它需要一种解决方法,以便将更改从嵌套Helmet回传播到服务器端的顶级组件.

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

Answer 1

hydrate的用法不仅限于renderToNodeStream- 您还可以（实际上应该）将它与经典的renderToString. 除了它产生一个http流而不是一个字符串之外，renderToNodeStream本质上是一样的renderToString。这意味着您可以在渲染过程中将渲染的 html逐字节发送到客户端，这与标准相反renderToString，当您必须先等待整个 html 字符串被渲染，然后才能将其发送给客户端。

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

由于 的流特性renderToNodeStream，在库的当前状态下，Helmet 的服务器端使用实际上是不可能的——head当 React get 计算 DOM 包括 Helmet 的组件时，DOM的一部分被发送到服务器。流不能只是恢复并将 Helmet 的更改附加到head.

总而言之，回答您的问题 -renderToNodeStream通过发送流解决了同步呈现为字符串的问题，但它引入了新问题，如果 React App 的其他部分需要它，则无法修补推送的内容。它不会在服务器端的状态更改和重新渲染方面添加任何内容。另一方面，hydrate在这个主题中没有引入任何新内容——它只是旧render.

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