从ReactDOMServer文档(重点是我的):
如果您调用
ReactDOM.hydrate()已经具有此服务器渲染标记的节点, React将保留它并仅附加事件处理程序
,从而使您具有非常出色的首次加载体验。
粗体文本是主要区别。
render如果初始DOM与当前DOM之间存在差异,则可能会更改您的节点。
hydrate将仅附加事件处理程序。
从作为单独的API
引入
hydrate的Github问题开始:
如果这是您的初始DOM:
<div id="container"> <div >Loading...</div></div>
然后致电:
ReactDOM.render( <div > <span>App</span> </div>, document.getElementById('container'))打算只进行客户端渲染(不进行水合作用)。然后你以
<div id="container"> <div > <span>App</span> </div></div>
因为我们不修补属性。
仅供参考,他们未修补属性的原因是
…这在正常的水合作用模式下进行水合作用真的很慢,并且减慢了初始渲染到非SSR树中的速度。



