2017-10-01 16 views
14

私はドキュメントを読んだことがありますが、React 16のhydrate()とrender()の違いはわかりませんでした。私はhydate()がSSRとクライアント側のレンダリングを組み合わせるのに使われていることを知っています。React 16のhydrate()とrender()の違いは何ですか?

誰かが水分補給について説明してから、ReactDOMの違いは何ですか?

+0

下記の@topharの回答は正しいです。詳細はこちらをご覧ください。https://reactjs.org/docs/react-dom.html – jack123

答えて

16

ReactDOMServerドキュメント(強調鉱山)から:

あなたはそれを維持するだけのイベントハンドラを添付して、あなたがすることができますが反応、すでにこのサーバーレンダリングのマークアップを持つノード上ReactDOM.hydrate()を呼び出す場合非常にパフォーマンスの良い初回負荷の経験があります。

太字のテキストが主な違いです。 renderは、最初のDOMと現在のDOMの間に違いがある場合、ノードを変更することがあります。 hydrateは、イベントハンドラのみを添付します。 Github issue that introduced hydrate as a separate 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>で終わります。属性にパッチを当てていないからです。

だけFYI彼らは属性にパッチを適用していない理由は、これが通常のハイドレーションモードに水和本当に遅くなることが、初期は非SSRツリーにレンダリングが遅くなり...

です。

関連する問題