Какая разница между hydrate() и render() в React 16?

Ответ 1

Из документов ReactDOMServer (основное внимание):

Если вы назовете ReactDOM.hydrate() на узле, у которого уже есть эта разметка, предоставленная сервером, React сохранит его и только присоединяет обработчики событий, позволяя вам иметь очень эффективный опыт первой загрузки.

Основной текст, выделенный жирным шрифтом. render может изменить ваш узел, если есть разница между начальной DOM и текущей DOM. hydrate будет только прикреплять обработчики событий.

Из проблемы Github, которая вводила hydrate в качестве отдельного 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.

Ответ 2

В дополнение к выше...

ReactDOM.hydrate() аналогичен render(), но он используется для гидратации (присоединения слушателей событий) контейнера, содержимое HTML которого было обработано ReactDOMServer. React попытается присоединить прослушиватели событий к существующей разметке.

Использование ReactDOM.render() для увлажнения рендеринга на сервере контейнера устарело из-за медлительности и будет удалено в React 17, поэтому используйте вместо него hydrate().

Ответ 3

Гидрат в основном используется в случае SSR (рендеринга на стороне сервера). SSR дает вам скелет или HTML-разметку, которая отправляется с сервера, чтобы в первый раз, когда ваша страница загружалась, она не была пустой, и поисковые роботы могли индексировать ее для SEO (вариант использования SSR). Таким образом, гидрат добавляет JS к вашей странице или узлу, к которому применяется SSR. Чтобы ваша страница реагировала на события, выполненные пользователем.

Рендеринг используется для рендеринга компонента в браузере на стороне клиента. Плюс, если вы попытаетесь заменить гидрат рендером, вы получите предупреждение о том, что рендеринг устарел и не может использоваться в случае SSR. он был удален из-за того, что он медленный по сравнению с гидратом.

Ответ 4

Весь процесс возврата функциональности обратно в HTML, который уже был представлен в React на стороне сервера, называется гидратацией.

Таким образом, процесс повторного рендеринга по ранее обработанному HTML называется гидратацией.

Поэтому, если мы попытаемся ReactDOM.render() наше приложение, вызвав ReactDOM.render() это должно быть сделано путем вызова ReactDOM.hydrate().