hydrate

当某些业务有其特殊性，对性能要求比较苛刻，且有 SEO 需求时，客户端渲染方案就无法满足需求了，毕竟缺点也是非常明显的，首屏性能无法保障，纵使按需加载，依然很难保证首屏秒开。此时我们就需要考虑下服务端渲染了，服务端渲染由来已久，因为服务端渲染确实有非常多的益处。在 Rax 中可以参考下服务器端渲染方案。

相比于 render，hydrate 会最大程度的复用容器节点中已有的元素。以服务器端渲染为例，当在浏览器端 hydrate 一个组件时，Rax 会基于服务器端渲染的 HTML 结构，进行事件和状态的绑定，而非重新渲染元素。

rax-hydrate 已为你指定了默认的 driver-dom，用于服务端渲染，提供在初次渲染的时候，去复用原本已经存在的 DOM 节点，减少重新生成节点以及删除原本 DOM 节点的开销，来加速初次渲染的功能。如果要指定其他 driver，则可以在 render 方法的 options 中指定 hydrate 为 true。

方法

hydrate(element, container, [callback])

参数

• element 可以是任意需要渲染的 Rax 组件或字符串

• container 为任意指定 DOM 渲染容器

• callback 传入回调函数，将在组件被渲染或更新之后被执行

示例

import hydrate from 'rax-hydrate';

// MyComponent.jsx
function MyComponent(props) {
  return <h1>Hello world</h1>;
}

hydrate(<MyComponent />, document.body);

参考

服务器端渲染