javascript-React 16中的hydrate()和render()有什么区别?

我已经阅读了文档,但是我真的不太了解React 16中的hydrate()render()之间的区别。

我知道hydrate()用于结合SSR和客户端渲染。

有人可以解释一下保湿吗,然后ReactDOM有什么区别?

shabenda asked 2020-02-10T03:20:47Z
4个解决方案
58 votes

从ReactDOMServer文档(重点是我的):

如果您在已经具有此服务器渲染标记的节点上调用<div id="container"><div class="spinner">Loading...</div></div>,React将保留它并仅附加事件处理程序,从而使您具有非常出色的首次加载体验。

粗体文本是主要区别。 如果初始DOM与当前DOM之间存在差异,则<div id="container"><div class="spinner">Loading...</div></div>可能会更改您的节点。 ReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container'))将仅附加事件处理程序。

从Github问题中引入<div id="container"><div class="spinner">Loading...</div></div>作为单独的API:

如果这是您的初始DOM   <div id="container"><div class="spinner">Loading...</div></div>   然后致电ReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container')),以进行客户端仅渲染(而不是水合作用)。   然后以<div id="container"><div class="spinner"><span>App</span></div></div>结尾。因为我们不修补属性。

仅供参考,他们未修补属性的原因是

...这在正常的水合作用模式下进行水合作用真的很慢,并且减慢了初始渲染到非SSR树中的速度。

topher answered 2020-02-10T03:21:31Z
17 votes

除了以上...

hydrate()render()相同,但是它用于水合(附加事件侦听器)其HTML内容由ReactDOMServer呈现的容器。 React将尝试将事件侦听器附加到现有标记。

由于反应缓慢,不建议使用ReactDOM.render()水合服务器渲染的容器,并且在React 17中将其删除,因此请改用hydrate()

Devinder Suthwal answered 2020-02-10T03:22:00Z
11 votes

水合物基本上用于SSR(服务器端渲染)。 SSR为您提供了从服务器附带的框架或HTML标记,因此,第一次在页面加载时不为空白,搜索引擎机器人可以将其索引为SEO(SSR的一个用例)。 因此,水合物会将JS添加到您的页面或要应用SSR的节点。 这样您的页面才能响应用户执行的事件。

渲染用于在客户端浏览器Plus上渲染组件,如果尝试将水合物替换为渲染,则会收到警告,提示渲染已弃用,在SSR情况下无法使用。 由于它比水合物慢,因此将其除去。

Sumit Kapoor answered 2020-02-10T03:22:25Z
4 votes

将功能放回到已经在服务器端React中呈现的HTML中的整个过程称为水合。

因此,对曾经渲染过的HTML进行重新渲染的过程称为水合。

因此,如果我们尝试通过调用ReactDOM.render()来充水我们的应用程序,则应该通过调用ReactDOM.hydrate()来完成。

Daniel answered 2020-02-10T03:22:54Z
translate from https://stackoverflow.com:/questions/46516395/whats-the-difference-between-hydrate-and-render-in-react-16