[解決済み] React 16のhydrate()とrender()の違いは何ですか？

私が知っているのは hydrate() は、SSRとクライアントサイドレンダリングを組み合わせるために使われます。

誰かハイドレーティングとは何か、それからReactDOMでは何が違うのか説明してくれませんか？

どのように解決するのですか？

からの ReactDOMServer docsから（強調は私）。

もし、あなたが ReactDOM.hydrate() を呼び出すと、すでにこのサーバレンダリングされたマークアップを持つノード上で を呼び出すと、React はそれを保持し、イベントハンドラのみを添付します。 で、非常にパフォーマンスの高いファーストロードを体験することができます。

太字のテキストが主な相違点です。 render は、初期DOMと現在のDOMに差異がある場合、ノードを変更することがあります。 hydrate はイベントハンドラのみをアタッチします。

から を導入した Github issue から hydrate を別の API として導入しました。 :

これが初期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 ツリーへの最初のレンダリングが遅くなります。