createInstance

创建应用，并通过应用上的render方法渲染成实际的 DOM 节点。

参数

  • root: VNode - 一个 VNode 节点，可以通过 h 函数创建。
  • isHydrate: boolean - 用于服务端渲染参数，为 Truthy 则代表使用“水合”方法让界面变得可响应。

返回值

一个应用对象，也是 javascript 中的 plain object。

类型声明

interface Instance {
  container: Element | null
  render: (containerOrSelector: string | HTMLElement) => Instance
  destroy: () => Instance
  readonly plugins: Set<Plugin>
  get root(): VNode
}

declare function createInstance(root: VNode, isHydrate?: boolean): Instance

示例

import { h, createInstance } from 'gyron'

const App = h(() => {
  return h('div', 'hello world')
})

createInstance(h(App)).render('#root')

createSSRInstance

创建服务端应用。服务端组件的 isSSR 的值始终为 true。

参数

  • root: VNode - 一个 VNode 节点，可以通过 h 函数创建。

返回值

一个服务端应用对象。更多用法可以参考SSR

类型声明

declare function createSSRInstance(vnode: VNode): Instance

示例

import { h, createSSRInstance, renderToString } from 'gyron'

const App = h(() => {
  return h('div', 'hello world')
})

const { root } = createSSRInstance(h(App))

renderToString(root).then((html) => {
  console.log(html)
  // <div>hello world</div>
})

createSSRContext

创建服务端应用后在客户端用此方法水合代码，接受一个对象，对象上包含一个message属性，它的值通常由程序自动生成。

生成规则如下： 对象的key是组件所在的位置和名称组成。 对象的value是组件的props。由 Gyron 自动注入。

类型声明

declare function createSSRContext(context: SSRContext): {
  render: (
    vnode: VNode,
    containerOrSelector: string | HTMLElement
  ) => VNode<VNodeType>
}

示例

import { h, createSSRContext } from 'gyron'

const App = h(({ msg }) => {
  return h('div', msg)
})

createSSRContext({
  message: {
    '/test?name=App': {
      msg: 'hello world',
    },
  },
}).render(App, '#app')

render

将实例对象渲染到真实的 DOM 节点。

参数

  • containerOrSelector: string | HTMLElement - 匹配的选择器字符串或者一个 HTMLElement 类型的节点。

返回值

一个应用对象，其中的 container 值就是真实的 DOM 节点。

类型声明

interface Instance {
  // ...
  render: (containerOrSelector: string | HTMLElement) => Instance
}

示例

import { h, createInstance } from 'gyron'

const App = h(() => {
  return h('div', 'hello world')
})

createInstance(h(App)).render('#root')

destory

销毁应用，所有组件的实例都会被销毁，并且组件的生命周期勾子都会执行。

类型声明

interface Instance {
  // ...
  destroy: () => Instance
}

示例

import { createInstance, h } from 'gyron'

const App = h(() => {
  return h('div', 'hello world')
})

const app = createInstance(h(App))


app.destroy()