javascript - the - ¿Cuál es la diferencia entre hydrate() y render() en React 16?
react ssr (2)
He leído la documentación, pero realmente no entendí la diferencia entre hydrate() y render() en React 16.
Sé que hydrate() se utiliza para combinar SSR y renderización del lado del cliente.
¿Puede alguien explicar qué es hidratante y luego cuál es la diferencia en ReactDOM?
Además de lo anterior ...
ReactDOM.hydrate () es igual que render (), pero se usa para hidratar (adjuntar escuchas de eventos) un contenedor cuyos contenidos HTML fueron procesados por ReactDOMServer. React intentará adjuntar escuchas de eventos al marcado existente .
El uso de ReactDOM.render () para hidratar un contenedor procesado por el servidor está obsoleto debido a la lentitud y se eliminará en React 17. En su lugar, use hydrate ().
De los documentos de ReactDOMServer (énfasis mío):
Si llama a
ReactDOM.hydrate()en un nodo que ya tiene este marcado de servidor, React lo conservará y solo adjuntará controladores de eventos , lo que le permitirá tener una experiencia de primera carga muy eficaz.
El texto en negrita es la principal diferencia. render puede cambiar su nodo si hay una diferencia entre el DOM inicial y el DOM actual. hydrate solo adjuntará manejadores de eventos.
Del problema de Github que introdujo el hydrate como una API separada :
Si este es su DOM inicial
<div id="container"><div class="spinner">Loading...</div></div>y luego llame aReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById(''container''))con la intención de hacer un renderizado del lado del cliente (no de hidratación). Luego finaliza con<div id="container"><div class="spinner"><span>App</span></div></div>. Porque no arreglamos los atributos.
Solo para tu información, la razón por la que no parchearon los atributos es
... Esto sería muy lento para hidratarse en el modo de hidratación normal y ralentizar el procesamiento inicial en un árbol que no sea SSR.