6

hydrate登陆 React 16,但尚未记录其使用。

本文建议它应该与一起使用,renderToNodeStream但没有提供太多细节。

的预期用途是hydrate什么?

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

是否可以帮助避免限制hydrate并在服务器端呈现异步和/或重新呈现的组件?renderToNodeStreamrenderToString

4

1 回答 1

6

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

ReactDOM.hydrate是标准的替代品ReactDOM.render。基本的(也是唯一的?)区别在于,ReactDOM.render与 即使存在一些细微的差异,它也会尝试将 React 客户端应用程序附加到服务器渲染的 DOM,只修补不同的部分。

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

总而言之,回答您的问题 -renderToNodeStream通过发送流解决了同步渲染到字符串的问题,但它引入了新问题,即如果 React 应用程序的其他部分需要它,则无法修补推送的内容。它不会在服务器端的状态更改和重新渲染方面添加任何内容。另一方面,hydrate在这个主题中没有引入任何新东西——它只是一个调整的、更宽容的旧版本render

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

于 2017-11-09T11:08:27.307 回答