React 16中的hydrate（）和render（）有什么区别？

从ReactDOMServer文档（重点是我的）：

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

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

从作为单独的API 引入hydrate的Github问题开始：

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