水合是指当 HTML 在浏览器中呈现时，将 JavaScript 行为添加回页中已编译 HTML 的过程。
例如，如果页上有两个要呈现为主项/详细信息的组件，则单击主项中的项需要更新详细信息组件。这都由在页中执行的 JavaScript 处理。要做到这一点，在这两个组件已呈现到页中后，您需要通过将 on click 事件处理程序添加到主项组件中的元素和详细信息组件容器上的监听程序，以针对这两个组件对 HTML 进行水合，从而在发生 on click 事件时根据事件中传递的有效负载重新呈现。
组件编译器将 HTML 插入到页中。如果您的组件需要在运行时执行额外的 JavaScript 来添加诸如事件处理程序之类的内容，则您有两个选项，内嵌 JavaScript 或 Hydrate 函数。您选择的解决方案取决于您的要求。
可以将 <script> 标记直接插入到返回的已编译标记。脚本将在页执行时执行。
例如：
<script src="/_sitesclouddelivery/renderer/libs/scs-core/jssor-
slider/js/jssor.slider.min.js" type="text/javascript"></script>
<div id="slider_container_c46b122d-978a-429d-aa25-9b5698428f6f"
style="position: relative; top: 0px; left: 0px; height: 400px; width: 600px;
background-color: rgb(68, 68, 68); visibility: visible;" data-jssor-
slider="1">
. . .
</div>
<script>
(function () {
// get the required options
var options =
{"$FillMode":2,"$AutoPlay":false,"$AutoPlayInterval":3000,"$SlideDuration":50
0,"$ArrowKeyNavigation":true,"$HWA":false,"$BulletNavigatorOptions":{"$Chance
ToShow":1,"$AutoCenter":1,"$SpacingX":5},"$ArrowNavigatorOptions":{"$ChanceTo
Show":1,"$AutoCenter":2,"$Steps":1},"$ThumbnailNavigatorOptions":{"$ChanceToS
how":0,"$DisplayPieces":7,"$SpacingX":8,"$ParkingPosition":240}};
// select the JSSOR value options
options.$BulletNavigatorOptions.$Class = $JssorBulletNavigator$;
options.$ArrowNavigatorOptions.$Class = $JssorArrowNavigator$;
options.$ThumbnailNavigatorOptions.$Class =
$JssorThumbnailNavigator$;
// create the slider
var slider = new $JssorSlider$("slider_container_c46b122d-978a-
429d-aa25-9b5698428f6f", options);
// resize, maintaining aspect ratio
var container = slider.$Elmt.parentElement;
if (container) {
slider.$ScaleWidth(container.getBoundingClientRect().width);
}
})();
</script>
可以在 render.js 文件中包括 hydrate 函数（而不是内嵌 JavaScript），并且请注意，当您返回编译的标记时，组件在运行时需要水合。此水合可避免重复 <script> 标记，允许您利用现有 JavaScript 代码来管理事件。
即使已加载 render.js 文件，在水合期间也不会调用 render() 函数。仅调用 hydrate() 函数。
注：
如果编译的组件没有说它需要水合，则永远不加载组件的render.js 文件。例如，定制内容布局编译器将返回 - { hydrate: true }。
return Promise.resolve({
content: compiledContent,
hydrate: true // note that we want to hydrate this component using the
render.js hydrate() function. This is required for when the user clicks on
the author
});
此外，如果需要，定制编译器可以添加它在运行时将查找的 hydrate 属性。例如：
Compiler:
// calculate the hydrate data
content.hydrateData = JSON.stringify({
contentId: content.id,
authorName: content.fields['starter-blog-author_name']
});
. . .
Template:
<div class="author-container" data-hydrate="{{hydrateData}}">
最后，如果组件注意到它需要水合，则在运行时将加载组件的 render.js 文件，并调用 hydrate() 函数，传入包含已编译标记的容器 <div>。
例如，render.js - 请参见 hydrate() 函数：
function selectAuthor(parentObj, contentId, authorName) {
var $parentObj = $(parentObj);
$parentObj.find(".author-name").click($.proxy(function () {
$(".author-name").removeClass('author-selected');
$(event.target).addClass('author-selected');
}, self));
if (window.location.href.indexOf("default=" + contentId) >= 0) {
$(".author-name").each(function () {
if (this.innerText === authorName) {
$(this).addClass('author-selected');
}
});
}
}
. . .
hydrate: function (parentObj) {
var $parentObj = $(parentObj),
hydrateData = $parentObj.find('.author-container').attr('data-
hydrate');
if (hydrateData) {
var data = JSON.parse(hydrateData);
selectAuthor(parentObj, data.contentId, data.authorName);
}
},
render: function (parentObj) {
. . .
try {
// Mustache
template = Mustache.render(templateHtml, content);
if (template) {
$(parentObj).append(template);
}
selectAuthor(parentObj, this.contentItemData.id,
content.fields['starter-blog-author_name']);
} catch (e) {
console.error(e.stack);
}
}