В React 16 добавлено множество новых функций, но сегодня мы поговорим о том, в чем на самом деле разница между React DOM render и Hydrate (В восторге !!!).

Отлично, поэтому и Render, и Hydrate являются модулями для пакета react-DOM.

Согласно официальному определению «Render используется для рендеринга элемента React в DOM в предоставленном контейнере и возврата ссылки на контейнер (или возврата null для компонента без состояния). ». Для получения дополнительной информации перейдите по ссылке ниже:



ReactDOM - React
Если вы загружаете React из тега, эти API верхнего уровня доступны в глобальном ReactDOM. Если вы используете ES6 с npm, вы… reactjs.org



Hydrate - это то же самое, что и рендеринг, но он используется для гидратации контейнера, HTML-содержимое которого было обработано ReactDOMServer API.

Не путайте с приведенным выше утверждением, не волнуйтесь, просто расслабьтесь, расслабьтесь и продолжайте читать в этом блоге :)

Итак, hydrate () используется, когда мы хотим отобразить наше приложение React на стороне сервера и гидратировать пакет JavaScript на стороне клиента, что делает наше приложение быстрым, а также позволяет поисковым системам сканировать ваши страницы в целях SEO. Давайте углубимся в код для лучшего понимания.

Здесь я использую шаблон приложения create response.

Это простая иллюстрация, на которой отображается Hello, Ankur в браузере.

Но что произойдет, если мы изменим метод рендеринга на гидрат, любая идея !! Да, в ответ на запрос в консоли будет выдано предупреждение: «Ожидается, что HTML-код сервера будет содержать соответствующий ‹h1› в ‹div›.»

Ошибка ясно показывает, что если ваше приложение не использует рендеринг на стороне сервера (SSR), используйте для начала рендеринг responsedom.

Итак, давайте изменим приведенный выше код, сделав его SSR.

СТОРОНА СЕРВЕРА

Создайте компонент React и смонтируйте его в DOM.

Для рендеринга я буду использовать гидрат React DOM вместо рендеринга для SSR.

Сначала создайте файл сервера, который в основном отображает HTML, и этот HTML, отображаемый на сервере, будет гидратироваться на стороне клиента.

Здесь переменная name используется для передачи ее компоненту реакции Hello из файла сервера, и то же имя будет использоваться для ее рендеринга на стороне клиента.

И теперь предупреждение обретает четкость: УУУУУУУУУУУУУУУУУУУУУУУУУУаааааааелаа была ли!

Спасибо за чтение! Пожалуйста, поделитесь им со всеми, кому это может пригодиться.