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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

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

如果您调用ReactDOM.hydrate()已经具有此服务器渲染标记的节点，

，从而使您具有非常出色的首次加载体验。

粗体文本是主要区别。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树中的速度。

以上是 React 16中的hydrate（）和render（）有什么区别？ 的全部内容， 来源链接： utcz.com/qa/416615.html

回到顶部