Quelle est la différence entre hydrate () et render () dans React 16?
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?
Depuis le ReactDOMServer docs (emphase mienne):
Si vous appelez
ReactDOM.hydrate()sur un nœud qui possède déjà ce balisage rendu par le serveur, , React le conservera et n'attachera que des gestionnaires d'événements , ce qui vous permettra avoir une première expérience très performante.
Le texte en gras est la principale différence. render peut changer de noeud s'il existe une différence entre le DOM initial et le DOM actuel. hydrate n'attachera que des gestionnaires d'événements.
Depuis le problème de Github qui introduisait hydrate en tant qu'API séparée :
S'il s'agit de votre DOM _
<div id="container"><div class="spinner">Loading...</div></div>_ initial, puis appelezReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container'))avec l'intention de faire un rendu côté client (sans hydratation). Ensuite, vous terminez avec _<div id="container"><div class="spinner"><span>App</span></div></div>_. Parce que nous ne corrigeons pas les attributs.
Juste pour votre information, la raison pour laquelle ils n'ont pas corrigé les attributs est
... Ce serait très lent à hydrater dans le mode d'hydratation normal et à ralentir le rendu initial dans un arbre non-SSR.
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.
Utiliser ReactDOM.render () pour hydrater un conteneur rendu par le serveur est obsolète en raison de la lenteur et sera supprimé dans React 17 , utilisez donc hydrate() au lieu.
Hydrate est essentiellement utilisé en cas de SSR (Rendu du côté serveur). SSR vous fournit le squelette ou le balisage HTML fourni par un serveur. Ainsi, lors du premier chargement de votre page, celle-ci n'est pas vide et les robots des moteurs de recherche peuvent l'indexer pour le référencement (cas d'utilisation de SSR). Alors hydrate ajoute le JS à votre page ou à un nœud auquel le SSR est appliqué. Pour que votre page réponde aux événements effectués par l'utilisateur.
Le rendu est utilisé pour rendre le composant sur le navigateur côté client Plus. Si vous essayez de remplacer l'hydrate par le rendu, vous recevrez un avertissement indiquant que le rendu est obsolète et qu'il ne peut pas être utilisé en cas de SSR. il a été enlevé à cause de sa lenteur comparée à son hydratation.
L'ensemble du processus de réintégration des fonctionnalités dans le code HTML déjà rendu dans le serveur React 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(), il est supposé le faire en appelant ReactDOM.hydrate().