javascript - React 16 中的 hydrate() 和 render() 有什么区别？

Question

我已经阅读了文档，但我并没有真正理解 React 16 中 hydrate() 和 render() 之间的区别。

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

谁能解释一下什么是补水以及 ReactDOM 的区别是什么？

Answer 1

来自ReactDOMServer文档(强调我的):

If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.

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

来自Github issue that introduced hydrate as a separate API :

If this is your initial DOM:

<div id="container">
    <div class="spinner">Loading...</div>
</div>

and then call:

ReactDOM.render(
   <div class="myapp">
      <span>App</span>
   </div>,
   document.getElementById('container')
)

intending to do a client-side only render (not hydration). Then you end with

<div id="container">
   <div class="spinner">
       <span>App</span>
   </div>
</div>

Because we don't patch up the attributes.

仅供引用，他们没有修补属性的原因是

... This would be really slow to hydrate in the normal hydration mode and slow down initial render into a non-SSR tree.