Quelle est la différence entre hydrate () et render () dans React 16?

Question

J'ai lu la documentation, mais je n'ai pas vraiment compris la différence entre hydrate() et render() dans React 16.

Je sais que hydrate() est utilisé pour combiner le rendu SSR et le rendu côté client.

Quelqu'un peut-il expliquer ce qui est hydratant et ensuite quelle est la différence dans ReactDOM?

Answer 1

À partir de la ReactDOMServer docs (l'emphase est mienne):

Si vous appelez ReactDOM.hydrate() sur un nœud qui possède déjà ce serveur-rendu de balisage, de Réagir à préserver et seulement à joindre les gestionnaires d'événements, vous permettant d'avoir une très performant de la première charge de l'expérience.

Le texte en gras est la principale différence. render peut changer votre nœud si il y a une différence entre la première DOM et DOM actuel. hydrate fixez seulement des gestionnaires d'événements.

À partir de l' Github question qui introduit hydrate en tant que distincte de l'API:

Si c'est votre première DOM <div id="container"><div class="spinner">Loading...</div></div> et puis appelez ReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container')) qui ont l'intention de le faire côté client seulement render (pas d'hydratation). Ensuite, vous vous retrouvez avec des <div id="container"><div class="spinner"><span>App</span></div></div>. Parce que nous n'avons pas de patch les attributs.

Juste pour info la raison pour laquelle ils n'ont pas de patch des attributs est

... Ce serait vraiment lent à s'hydrater dans les conditions normales de l'hydratation de la mode et de ralentir initiale rendre dans une situation de non-SSR arbre.

Answer 2

S'hydrater est essentiellement utilisé dans le cas de la SSR(côté Serveur de Rendu). RSS vous donne le squelette ou des balises HTML qui est envoyé à partir d'un serveur de sorte que, pour la première fois lors de votre chargement de la page, il n'est pas vide et les robots des moteurs de recherche peuvent indexer pour le RÉFÉRENCEMENT(UN cas d'utilisation de la SSR). Donc, hydrate ajoute le JS sur votre page ou d'un nœud qui SSR est appliquée. Afin que votre page répond aux opérations effectuées par l'utilisateur.

Le rendu est utilisée pour le rendu du composant côté client navigateur et en Plus, si vous essayez de remplacer le hydrater avec de rendu, vous obtiendrez un avertissement que le rendu est obsolète et ne peut pas être utilisée dans le cas de la SSR. il a été enlevé à cause de cela d'être lent par rapport à hydrater.

Answer 3

En plus de ce qui précède ...

ReactDOM.hydrate() est identique à render() , mais il est utilisé pour hydrater (attacher des écouteurs d'événement) un conteneur dont le contenu HTML a été rendu par ReactDOMServer. React tentera d’attacher des écouteurs d’événement au balisage existant .

L'utilisation de ReactDOM.render () pour hydrater un conteneur rendu par le serveur est obsolète en raison de la lenteur et sera supprimée dans React 17 ; utilisez donc hydrate() place.

Answer 4

Le processus complet de réintégration des fonctionnalités dans le code HTML déjà rendu dans React côté serveur s'appelle hydratation.

Ainsi, le processus de re-rendu sur le code HTML une fois rendu est appelé hydratation.

Donc, si nous essayons d'hydrater notre application en appelant ReactDOM.render() devrait être fait en appelant ReactDOM.hydrate() .