web-dev-qa-db-ja.com

React 16のhydrate（）とrender（）の違いは何ですか？

ドキュメントを読みましたが、React 16のhydrate()とrender()の違いを本当に理解していませんでした。

hydrate()を使用してSSRとクライアント側のレンダリングを組み合わせることを知っています。

誰かが水和していることと、ReactDOMの違いは何かを説明できますか？

javascriptreactjsreact-domreact-fiber
48
shabenda

ReactDOMServer docs（emphasis mine）から：

このサーバーレンダリングマークアップを既に持っているノードでReactDOM.hydrate()を呼び出すと、Reactはそれを保持し、イベントハンドラーのみを添付します。非常にパフォーマンスの高い初回ロードエクスペリエンスを提供します。

太字のテキストが主な違いです。 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ツリーへの初期レンダリングを遅くします。

58
topher

上記に加えて...

ReactDOM.hydrate()はrender()と同じですが、ReactDOMServerによってレンダリングされたHTMLコンテンツを持つhydrate（attach event listeners）containerに使用されます。 Reactは、イベントリスナーを既存のマークアップにアタッチしようとします。

ReactDOM.render（）を使用してサーバーレンダリングされたコンテナをハイドレートすることは、速度が遅いため推奨されず、React 17で削除されるため、hydrate()を使用します代わりに。

16
Devinder Suthwal

ハイドレートは、基本的にSSR（サーバー側レンダリング）の場合に使用されます。 SSRは、サーバーから出荷されるスケルトンまたはHTMLマークアップを提供します。これにより、ページが初めて読み込まれたときに空白にならず、検索エンジンボットがSEOのインデックスを作成できます（SSRのユースケース）。そのため、ハイドレートはJSをページまたはSSRが適用されるノードに追加します。ユーザーが実行したイベントにページが応答するようにします。

レンダリングは、クライアントサイドブラウザープラスでコンポーネントをレンダリングするために使用されます。ハイドレートをレンダリングに置き換えようとすると、レンダリングが非推奨になり、SSRの場合に使用できないという警告が表示されます。ハイドレートに比べて遅いため、削除されました。

11
Sumit Kapoor

サーバー側Reactで既にレンダリングされた機能をHTMLに戻すプロセス全体をハイドレーションと呼びます。

したがって、一度レンダリングされたHTMLを再レンダリングするプロセスは、ハイドレーションと呼ばれます。

したがって、ReactDOM.render()を呼び出してアプリケーションをハイドレートしようとすると、ReactDOM.hydrate()を呼び出して実行されるはずです。

4
Daniel