小编典典

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

reactjs

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

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

有人可以解释什么是补水,然后ReactDOM有什么区别?


阅读 666

收藏
2020-07-22

共1个答案

小编典典

ReactDOMServer文档(重点是我的):

如果您调用ReactDOM.hydrate()已经具有此服务器渲染标记的节点, React将保留它并仅附加事件处理程序
,从而使您具有非常出色的首次加载体验。

粗体文本是主要区别。render如果初始DOM与当前DOM之间存在差异,则可能会更改您的节点。hydrate将仅附加事件处理程序。

作为单独的API
引入hydrateGithub问题开始

如果这是您的初始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树中的速度。

2020-07-22