我已经阅读了文档,但是我真的不了解React hydrate()和之间的区别render()。
hydrate()
render()
我知道hydrate()用来结合SSR和客户端渲染。
有人可以解释什么是补水,然后ReactDOM有什么区别?
从ReactDOMServer文档(重点是我的):
如果您调用ReactDOM.hydrate()已经具有此服务器渲染标记的节点, React将保留它并仅附加事件处理程序 ,从而使您具有非常出色的首次加载体验。
ReactDOM.hydrate()
粗体文本是主要区别。render如果初始DOM与当前DOM之间存在差异,则可能会更改您的节点。hydrate将仅附加事件处理程序。
render
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树中的速度。