render
优质
小牛编辑
132浏览
2023-12-01
在提供的 container
里通过指定的 Driver 渲染一个 Rax 元素,并返回该根组件的实例。如果提供了可选的回调函数,该回调将在组件被渲染或更新之后被执行。
注意当首次调用 render 时,会将容器节点里的所有 DOM 元素都替换掉,后续调用时则进行高效更新处理。
方法
render(element, container, options, [callback])
参数
element
可以是任意需要渲染的 Rax 组件或字符串
container
为任意指定 DOM 渲染容器
options
driver
: 指定 Driver
hydrate
: 指定是否开启 hydrate 渲染模式,默认为false
callback
传入回调函数,将在组件被渲染或更新之后被执行
返回值
当调用该方法时,返回 Rax 元素实例。
示例
可指定对应端的 Driver,也可以指定面向多端项目的 Driver,旨在抹平 Web 与 Weex 的差异,渲染一个组件到根节点:
import { render } from 'rax';
import DriverUniversal from 'driver-universal';
const HelloMessage = function (props) {
return <h1>{props.name}</h1>
};
render(<HelloMessage name="world" />, document.body, { driver: DriverUniversal })