diff --git a/README.md b/README.md
index f92423f..e2bb78f 100644
--- a/README.md
+++ b/README.md
@@ -7,16 +7,20 @@ Arix is a front-end framework based on JSX, but it doesn't have hooks like React
 ```tsx
 import * as airx from 'airx'
 
-const outsideCount = airx.createRef(1)
+// create a reaction value
+const outsideCount = airx.createSignal(1)
 
+// define a component
 function App() {
-  const innerCount = airx.createRef(1)
+  // create a reaction value
+  const innerCount = airx.createSignal(1)
 
   const handleClick = () => {
     innerCount.value += 1
     outsideCount.value +=1
   }
 
+  // return a render function
   return () => (
     <button onClick={handleClick}>
       {innerCount.value}
diff --git a/package-lock.json b/package-lock.json
index 60019f1..cf70763 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "airx",
-  "version": "0.0.1",
+  "version": "0.1.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "airx",
-      "version": "0.0.1",
-      "license": "ISC",
+      "version": "0.1.7",
+      "license": "MIT",
       "dependencies": {
         "csstype": "^3.1.2"
       },
@@ -1393,9 +1393,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -1574,9 +1574,9 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -2576,9 +2576,9 @@
       }
     },
     "semver": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
-      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
@@ -2699,9 +2699,9 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true
     },
     "wrappy": {
diff --git a/package.json b/package.json
index 91c3760..100c7ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "airx",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "a front framework with jsx",
   "types": "./output/index.d.ts",
   "exports": {
diff --git a/source/element.ts b/source/element.ts
index ede06f9..a30a2d6 100644
--- a/source/element.ts
+++ b/source/element.ts
@@ -1,8 +1,9 @@
-import { Ref } from './reactive'
 import * as symbol from './symbol'
 
 type AirxElementType<P> = string | AirxComponent<P>
 
+export type Props = { [propKey: string]: unknown }
+
 /**
  * AirxElement 表示一个 Airx 元素
  * type 表示元素的类型，可能是一个 html 标签，
@@ -13,7 +14,7 @@ type AirxElementType<P> = string | AirxComponent<P>
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface AirxElement<P = any> {
   type: AirxElementType<P>
-  props: { [propKey: string]: unknown } & P
+  props: Props & P
   [symbol.airxElementSymbol]: true
 }
 
@@ -29,8 +30,9 @@ export type AirxChildren =
 /**
  * 函数式组件接收自己的 props，并返回一个 AirxElement
  */
-export type AirxComponent<P = unknown> = (props: P) => AirxComponentRender
 export type AirxComponentRender = () => AirxChildren
+export type AirxComponent<P = unknown> = ReactiveComponent<P>
+export type ReactiveComponent<P = unknown> = (props: P) => AirxComponentRender
 
 /**
  * createElement 是用于创建 AirxElement 的工具函数
@@ -71,7 +73,11 @@ export interface AirxComponentLifecycle {
 
 export type AirxComponentContext = AirxComponentLifecycle & {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  provide: <T = any>(key: any, value: T) => (newValue: T) => void
+  provide: <T = unknown>(key: unknown, value: T) => (newValue: T) => void
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  inject: <T = any>(key: any) => Ref<T | null>
+  inject: <T = unknown>(key: unknown) => T | undefined
+}
+
+export function component<P = unknown>(comp: AirxComponent<P>): AirxComponent<P> {
+  return comp
 }
diff --git a/source/index.ts b/source/index.ts
index 3f1ad08..3448424 100644
--- a/source/index.ts
+++ b/source/index.ts
@@ -1,12 +1,13 @@
 import { AirxElement } from './element'
-import { renderToDom } from './render'
+import { Plugin, PluginContext, render } from './render'
 
 export * from './types'
-
-export { createRef, Ref, watch } from './reactive'
+export { Plugin } from './render'
+export { createSignal, Signal, watchSignal } from './reactive'
 
 export {
   Fragment,
+  component,
   createElement,
   AirxComponent,
   AirxElement,
@@ -22,20 +23,21 @@ export {
 } from './render'
 
 export interface AirxApp {
-  // plugin: (plugins: Plugin[]) => AirxApp
+  plugin: (...plugins: Plugin[]) => AirxApp
   mount: (container: HTMLElement) => AirxApp
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function createApp(element: AirxElement<any>): AirxApp {
+  const appContext = new PluginContext()
   const app: AirxApp = {
-    // plugin: (plugins) => {
-    //   console.log(plugins)
-    //   return app
-    // },
+    plugin: (...plugins: Plugin[]) => {
+      appContext.registerPlugin(...plugins)
+      return app
+    },
 
     mount: (container: HTMLElement) => {
-      renderToDom(element, container)
+      render(appContext, element, container)
       return app
     }
   }
diff --git a/source/plugin.ts b/source/plugin.ts
deleted file mode 100644
index 3af8d6d..0000000
--- a/source/plugin.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Plugin { }
diff --git a/source/reactive.ts b/source/reactive.ts
index 7b4b466..e5c5b73 100644
--- a/source/reactive.ts
+++ b/source/reactive.ts
@@ -1,13 +1,14 @@
 import * as symbol from './symbol'
 
-/** TODO: 污染全局总是不好的 */
+/** FIXME: 污染全局总是不好的 */
 const globalContext = {
-  dependencies: new Set<Ref<unknown>>()
+  dependencies: new Set<Signal<unknown>>()
 }
 
 export function createCollector() {
-  const newDependencies = new Set<Ref<unknown>>()
+  const newDependencies = new Set<Signal<unknown>>()
   return {
+    clear: () => newDependencies.clear(),
     complete: () => [...newDependencies.values()],
     collect: <R = unknown>(process: () => R) => {
       const beforeDeps = globalContext.dependencies
@@ -19,7 +20,7 @@ export function createCollector() {
   }
 }
 
-function triggerRef<T = unknown>(ref: Ref<T>) {
+function triggerRef<T = unknown>(ref: Signal<T>) {
   requestAnimationFrame(() => {
     const deps = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol)
     for (const dep of deps) {
@@ -28,11 +29,11 @@ function triggerRef<T = unknown>(ref: Ref<T>) {
   })
 }
 
-export interface Ref<T = unknown> {
+export interface Signal<T = unknown> {
   value: T
 }
 
-function createRefObject<T = unknown>(value: T): Ref<T> {
+function createRefObject<T = unknown>(value: T): Signal<T> {
   const object = Object.create({ value })
 
   Reflect.defineProperty(object, symbol.airxReactiveDependenciesSymbol, {
@@ -45,13 +46,13 @@ function createRefObject<T = unknown>(value: T): Ref<T> {
   return object
 }
 
-export function watch<T = unknown>(ref: Ref<T>, listener: () => unknown) {
+export function watchSignal<T = unknown>(ref: Signal<T>, listener: () => unknown) {
   const deps: Set<() => unknown> = Reflect.get(ref, symbol.airxReactiveDependenciesSymbol)
   deps.add(listener)
   return () => { deps.delete(listener) }
 }
 
-export function createRef<T>(obj: T): Ref<T> {
+export function createSignal<T>(obj: T): Signal<T> {
   const ref = createRefObject(obj)
 
   if (!globalContext.dependencies.has(ref)) {
diff --git a/source/render/browser.ts b/source/render/browser.ts
index 56cfe5b..d0e14a0 100644
--- a/source/render/browser.ts
+++ b/source/render/browser.ts
@@ -1,21 +1,15 @@
 import { AirxElement } from '../element'
 import { createLogger } from '../logger'
-import { InnerAirxComponentContext, Instance as BaseInstance, performUnitOfWork } from './common'
-
-type Instance = BaseInstance<Element>
+import { PluginContext } from './common/plugins'
+import { InnerAirxComponentContext, Instance, performUnitOfWork } from './common'
 
 interface RenderContext {
-  firstRendered: boolean
   rootInstance: Instance
   needCommitDom: boolean
   nextUnitOfWork: Instance | null
 }
 
-interface RenderOptions {
-  ensureRendered: boolean
-}
-
-export function innerRender(element: AirxElement, domRef: Element, options?: RenderOptions) {
+export function render(pluginContext: PluginContext, element: AirxElement, domRef: Element) {
   const rootInstance: Instance = {
     domRef,
     context: new InnerAirxComponentContext()
@@ -25,7 +19,6 @@ export function innerRender(element: AirxElement, domRef: Element, options?: Ren
   const context: RenderContext = {
     rootInstance,
     nextUnitOfWork: null,
-    firstRendered: false,
     needCommitDom: false
   }
 
@@ -51,109 +44,9 @@ export function innerRender(element: AirxElement, domRef: Element, options?: Ren
     type PropsType = Record<string, unknown>
 
     function updateDomProperties(dom: Element, nextProps: PropsType, prevProps: PropsType = {}) {
-      const isKey = (key: string) => key === 'key'
-      const isRef = (key: string) => key === 'ref'
-      const isStyle = (key: string) => key === 'style'
-      const isClass = (key: string) => key === 'class'
-      const isEvent = (key: string) => key.startsWith("on")
-      const isChildren = (key: string) => key === 'children'
-      const isGone = (_prev: PropsType, next: PropsType) => (key: string) => !(key in next)
-      const isNew = (prev: PropsType, next: PropsType) => (key: string) => prev[key] !== next[key]
-      const isProperty = (key: string) => !isChildren(key) && !isEvent(key) && !isStyle(key) && !isClass(key) && !isKey(key) && !isRef(key)
-
-      // https://developer.mozilla.org/zh-CN/docs/Web/API/Node
-      if (dom.nodeName === '#text' || dom.nodeName === '#comment') {
-        const textNode = (dom as unknown as Text | Comment)
-        if (textNode.nodeValue !== nextProps.textContent) {
-          textNode.nodeValue = String(nextProps.textContent)
-        }
-        return
-      }
-
-      // remove old style
-      const oldStyle = prevProps?.style
-      if (typeof oldStyle === 'object' && oldStyle != null) {
-        if (!('style' in dom) || !dom.style) return
-        Object.keys(oldStyle).forEach(key => {
-          /* eslint-disable @typescript-eslint/no-explicit-any */
-          if ('style' in dom && dom.style) {
-            delete (dom.style as any)[key as any]
-            /* eslint-enable @typescript-eslint/no-explicit-any */
-          }
-        })
-      }
-
-      // add new style
-      const newStyle = nextProps?.style
-      if (typeof newStyle === 'object' && newStyle != null) {
-        if (!('style' in dom) || !dom.style) return
-        Object.keys(newStyle).forEach((key: unknown) => {
-          /* eslint-disable @typescript-eslint/no-explicit-any */
-          const value = (newStyle as any)?.[key as any];
-          (dom.style as any)[key as any] = value == null ? '' : value
-          /* eslint-enable @typescript-eslint/no-explicit-any */
-        })
-      }
-
-      if (dom.className !== nextProps?.class) {
-        if (!nextProps?.class) {
-          dom.removeAttribute('class')
-        } else if (typeof nextProps?.class === 'string') {
-          dom.setAttribute('class', nextProps?.class)
-        }
+      for (const plugin of pluginContext.plugins) {
+        if (plugin.updateDom) plugin.updateDom(dom, nextProps, prevProps)
       }
-
-      //Remove old or changed event listeners
-      Object.keys(prevProps)
-        .filter(isEvent)
-        .filter(
-          key =>
-            !(key in nextProps) ||
-            isNew(prevProps, nextProps)(key)
-        )
-        .forEach(name => {
-          const eventType = name
-            .toLowerCase()
-            .substring(2)
-
-          if (prevProps[name] == null) return
-          if (typeof prevProps[name] !== 'function') {
-            console.error('EventListener is not a function')
-          } else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            dom.removeEventListener(eventType as any, prevProps[name] as any)
-          }
-        })
-
-      // Add event listeners
-      Object.keys(nextProps)
-        .filter(isEvent)
-        .filter(isNew(prevProps, nextProps))
-        .forEach(name => {
-          const eventType = name
-            .toLowerCase()
-            .substring(2)
-          if (nextProps[name] == null) return
-          if (typeof nextProps[name] !== 'function') {
-            console.error('EventListener is not a function')
-          } else {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            dom.addEventListener(eventType as any, nextProps[name] as any)
-          }
-        })
-
-      // Remove old properties
-      Object.keys(prevProps)
-        .filter(isProperty)
-        .filter(isGone(prevProps, nextProps))
-        .forEach(name => dom.setAttribute(name, ''))
-
-      // Set new or changed properties
-      Object.keys(nextProps)
-        .filter(isProperty)
-        .filter(isNew(prevProps, nextProps))
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .forEach(name => dom.setAttribute(name, nextProps[name] as any))
     }
 
     function getParentDom(instance: Instance): Element {
@@ -324,21 +217,15 @@ export function innerRender(element: AirxElement, domRef: Element, options?: Ren
     const logger = createLogger('workLoop')
     while (context.nextUnitOfWork && !shouldYield) {
       logger.debug('nextUnitOfWork', context.nextUnitOfWork)
-      context.nextUnitOfWork = performUnitOfWork(context.nextUnitOfWork, onUpdateRequire) as Instance
+      context.nextUnitOfWork = performUnitOfWork(pluginContext, context.nextUnitOfWork, onUpdateRequire) as Instance
       if (context.nextUnitOfWork == null) context.needCommitDom = true
-
-      // 强制要求首次渲染完成的的情况下必须要等 firstRendered 为 true 再进入时间片剩余检查
-      if (options?.ensureRendered !== true && context.firstRendered != true) {
-        if (deadline) shouldYield = deadline.timeRemaining() < 1
-      }
+      if (deadline) shouldYield = deadline.timeRemaining() < 1
     }
 
     if (context.needCommitDom && context.rootInstance.child) {
-      commitDom(
-        context.rootInstance.child,
+      commitDom(context.rootInstance.child,
         context.rootInstance.domRef?.firstChild || undefined
       )
-      context.firstRendered = true
       context.needCommitDom = false
     }
 
@@ -349,7 +236,3 @@ export function innerRender(element: AirxElement, domRef: Element, options?: Ren
   workLoop()
   return context.rootInstance
 }
-
-export function render(element: AirxElement, domRef: Element) {
-  return innerRender(element, domRef)
-}
diff --git a/source/render/common/hooks.ts b/source/render/common/hooks.ts
new file mode 100644
index 0000000..dc5468d
--- /dev/null
+++ b/source/render/common/hooks.ts
@@ -0,0 +1,33 @@
+import { AirxComponentContext } from '../../element'
+
+interface GlobalContext {
+  current: AirxComponentContext | null
+}
+
+export const globalContext: GlobalContext = {
+  current: null
+}
+
+function useContext(): AirxComponentContext {
+  if (globalContext.current == null) {
+    throw new Error('Unable to find a valid component context')
+  }
+
+  return globalContext.current
+}
+
+export const onMounted: AirxComponentContext['onMounted'] = (listener) => {
+  return useContext().onMounted(listener)
+}
+
+export const onUnmounted: AirxComponentContext['onUnmounted'] = (listener) => {
+  return useContext().onUnmounted(listener)
+}
+
+export const inject: AirxComponentContext['inject'] = (key) => {
+  return useContext().inject(key)
+}
+
+export const provide: AirxComponentContext['provide'] = (key, value) => {
+  return useContext().provide(key, value)
+}
diff --git a/source/render/common/index.ts b/source/render/common/index.ts
index 6451719..576319d 100644
--- a/source/render/common/index.ts
+++ b/source/render/common/index.ts
@@ -1,47 +1,17 @@
 
 import { createLogger } from '../../logger'
-import { Ref, watch, createRef, createCollector } from '../../reactive'
+import { watchSignal, createCollector } from '../../reactive'
 import { AirxChildren, AirxComponentContext, AirxComponentMountedListener, AirxComponentRender, AirxComponentUnmountedListener, AirxElement, createElement, isValidElement } from '../../element'
-
-interface GlobalContext {
-  current: AirxComponentContext | null
-}
-
-const globalContext: GlobalContext = {
-  current: null
-}
-
-function useContext(): AirxComponentContext {
-  if (globalContext.current == null) {
-    throw new Error('Unable to find a valid component context')
-  }
-
-  return globalContext.current
-}
-
-export const onMounted: AirxComponentContext['onMounted'] = (listener) => {
-  return useContext().onMounted(listener)
-}
-
-export const onUnmounted: AirxComponentContext['onUnmounted'] = (listener) => {
-  return useContext().onUnmounted(listener)
-}
-
-export const inject: AirxComponentContext['inject'] = (key) => {
-  return useContext().inject(key)
-}
-
-export const provide: AirxComponentContext['provide'] = (key, value) => {
-  return useContext().provide(key, value)
-}
+import { PluginContext } from './plugins'
+import { globalContext } from './hooks'
 
 export type Disposer = () => void
 
-export class InnerAirxComponentContext<DOM = Element | string> implements AirxComponentContext {
-  public instance?: Instance<DOM>
+export class InnerAirxComponentContext implements AirxComponentContext {
+  public instance!: Instance
   private disposers = new Set<Disposer>()
-  private providedMap = new Map<unknown, Ref<unknown>>()
-  private injectedMap = new Map<unknown, Ref<unknown>>()
+  public providedMap = new Map<unknown, unknown>()
+  public injectedMap = new Map<unknown, unknown>()
   private mountListeners = new Set<AirxComponentMountedListener>()
   private unmountedListeners = new Set<AirxComponentUnmountedListener>()
 
@@ -96,55 +66,25 @@ export class InnerAirxComponentContext<DOM = Element | string> implements AirxCo
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   public provide<T = unknown>(key: any, value: any): (v: T) => void {
-    if (!this.providedMap.has(key)) {
-      this.providedMap.set(key, createRef(value))
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const ref = this.providedMap.get(key)!
-    ref.value = value
-    return newValue => ref.value = newValue
+    this.providedMap.set(key, value)
+    return v => this.providedMap.set(key, v)
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public inject<T = unknown>(key: any): Ref<T | null> {
-    if (!this.injectedMap.has(key)) {
-      this.injectedMap.set(key, createRef(null))
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const resultRef = this.injectedMap.get(key)!
-
-    /**
-     * 从当前组件开始向上查找
-     * @returns 返回找到的值的 Ref 和提供该值的实例
-     */
-    const getResultOfContext = () => {
-      let provider: Instance<DOM> | null = null
-      let result: Ref<unknown> | null = null
-      let nextParentInstance = this.instance
-      while (nextParentInstance != null) {
-        provider = nextParentInstance
-        result = nextParentInstance.context.providedMap.get(key) || null
-        if (result != null) break
-        nextParentInstance = nextParentInstance.parent
+  public inject<T = unknown>(key: any): T | undefined {
+    const getProvideValueForParent = (instance: Instance | undefined, key: unknown): unknown => {
+      if (instance && instance.context) {
+        const value = instance.context.providedMap.get(key)
+        if (value != undefined) return value
+        if (instance.parent) return getProvideValueForParent(instance.parent, key)
       }
 
-      return { result, provider }
-    }
-
-    const { result, provider } = getResultOfContext()
-
-    if (result != null && provider != null) {
-      // 每当值发生变化，同步到当前的 Ref 上
-      this.addDisposer(watch(result, () => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        resultRef.value = result.value as any
-      }))
+      return undefined
     }
 
-    resultRef.value = result?.value
-    return resultRef as Ref<T | null>
+    const currentParentValue = getProvideValueForParent(this.instance.parent, key)
+    this.injectedMap.set(key, currentParentValue) // 更新本地值
+    return this.injectedMap.get(key) as T
   }
 
   addDisposer(...disposers: Disposer[]) {
@@ -194,21 +134,21 @@ export class InnerAirxComponentContext<DOM = Element | string> implements AirxCo
  *  ↓    |                 |
  * instance  -sibling→  instance...
  */
-export interface Instance<DOM = Element | string> {
-  domRef?: DOM
+export interface Instance {
+  domRef?: Element
 
-  child?: Instance<DOM> // 子节点
-  parent?: Instance<DOM> // 父节点
-  sibling?: Instance<DOM> // 兄弟节点
-  deletions?: Set<Instance<DOM>> // 需要移除的实例
+  child?: Instance // 子节点
+  parent?: Instance // 父节点
+  sibling?: Instance // 兄弟节点
+  deletions?: Set<Instance> // 需要移除的实例
 
   element?: AirxElement
   beforeElement?: AirxElement
   render?: AirxComponentRender
 
-  requiredUpdate?: boolean
+  needReRender?: boolean
   elementNamespace?: string
-  context: InnerAirxComponentContext<DOM>
+  context: InnerAirxComponentContext
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   memoProps?: any // props 的引用
@@ -220,7 +160,7 @@ export interface Instance<DOM = Element | string> {
    * @param parentInstance  当前正在处理的组件的实例
    * @param children  当前组件的子节点
    */
-export function reconcileChildren(parentInstance: Instance, childrenElementArray: AirxElement[]) {
+export function reconcileChildren(appContext: PluginContext, parentInstance: Instance, childrenElementArray: AirxElement[]) {
   const logger = createLogger('reconcileChildren')
   logger.debug('reconcileChildren', parentInstance, childrenElementArray)
   // parentInstance ←-------- 
@@ -282,15 +222,15 @@ export function reconcileChildren(parentInstance: Instance, childrenElementArray
     return [instance, () => childrenInstanceMap.delete(innerKey)]
   }
 
-  /**
-   * 浅比较 props 是否相等
-   * @param prev  之前的 props
-   * @param next  下一个 props
-   */
-  function isSameElementType(instance: Instance, nextElement: AirxElement): boolean {
-    if (instance == null) return false
-    if (instance.element == null) return false
-    if (instance.element.type !== nextElement.type) return false
+  /** 是否复用实例 */
+  function isReuseInstance(instance: Instance, nextElement: AirxElement): boolean {
+    for (const plugin of appContext.plugins) {
+      if (typeof plugin.isReuseInstance === 'function') {
+        const result = plugin.isReuseInstance(instance, nextElement)
+        // 任意一个插件要求不复用就不复用
+        if (result === false) return false
+      }
+    }
     return true
   }
 
@@ -316,53 +256,16 @@ export function reconcileChildren(parentInstance: Instance, childrenElementArray
     }
   }
 
-  function shouldUpdate(instance: Instance): boolean {
-    const nextProps = instance.element?.props
-    const preProps = instance.beforeElement?.props
-
-    if (Object.is(nextProps, preProps)) {
-      return false
-    }
-
-    if (
-      typeof preProps !== 'object'
-      || typeof nextProps !== 'object'
-      || preProps === null
-      || nextProps === null
-    ) {
-      logger.debug('props must be an object')
-      return true
-    }
-
-    // 对应 key 的值不相同返回 false
-    const prevKeys = Object.keys(preProps)
-    for (let index = 0; index < prevKeys.length; index++) {
-      const key = prevKeys[index]
-      if (key !== 'children' && key !== 'key') {
-        if (!Object.hasOwn(nextProps, key)) return true
-        if (!Object.is(preProps[key], nextProps[key])) return true
+  function isNeedReRender(instance: Instance): boolean {
+    for (const plugin of appContext.plugins) {
+      if (typeof plugin.isReRender === 'function') {
+        const result = plugin.isReRender(instance)
+        // 任意一个插件要求重新渲染就重新渲染
+        if (result === true) return true
       }
-
-      if (key === 'children') {
-        const prevChildren = preProps['children'] as AirxChildren[]
-        const nextChildren = nextProps['children'] as AirxChildren[]
-        // children 都是空的，则无需更新
-        if (prevChildren.length === 0 && nextChildren.length === 0) return false
-
-        // 简单比较一下 child 的引用
-        for (let index = 0; index < prevChildren.length; index++) {
-          const prevChild = prevChildren[index]
-          const nextChild = nextChildren[index]
-
-          if (prevChild !== nextChild) return true
-          if (typeof prevChild !== typeof nextChild) return true
-        }
-      }
-
-      return false
     }
 
-    return true
+    return false
   }
 
   function getElementNamespace(element: AirxElement): string {
@@ -388,9 +291,8 @@ export function reconcileChildren(parentInstance: Instance, childrenElementArray
   for (let index = 0; index < childrenElementArray.length; index++) {
     const element = childrenElementArray[index]
     const [instance, seize] = getChildInstance(element, index)
-    const isSameType = instance && isSameElementType(instance, element)
 
-    if (isSameType) {
+    if (instance && isReuseInstance(instance, element)) {
       seize() // 从 childrenInstanceMap 中释放
       newChildrenInstanceArray.push(instance)
       instance.beforeElement = instance.element
@@ -398,8 +300,8 @@ export function reconcileChildren(parentInstance: Instance, childrenElementArray
       updateMemoProps(instance)
 
       // 如果父组件更新了，子组件全部都要更新
-      if (instance.requiredUpdate !== true && typeof element.type === 'function') {
-        instance.requiredUpdate = parentInstance.requiredUpdate || shouldUpdate(instance)
+      if (instance.needReRender !== true && typeof element.type === 'function') {
+        instance.needReRender = parentInstance.needReRender || isNeedReRender(instance)
       }
     } else {
       const context = new InnerAirxComponentContext()
@@ -461,7 +363,7 @@ type OnUpdateRequire = (instance: Instance) => void
  * @param instance 当前处理的实例
  * @returns 返回下一个需要处理的 instance
  */
-export function performUnitOfWork(instance: Instance, onUpdateRequire?: OnUpdateRequire): Instance | null {
+export function performUnitOfWork(pluginContext: PluginContext, instance: Instance, onUpdateRequire?: OnUpdateRequire): Instance | null {
   const element = instance.element
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -490,23 +392,28 @@ export function performUnitOfWork(instance: Instance, onUpdateRequire?: OnUpdate
       const component = element.type
       const beforeContext = globalContext.current
       globalContext.current = instance.context.getSafeContext()
-      instance.render = collector.collect(() => component(instance.memoProps))
-      globalContext.current = beforeContext
+      const componentReturnValue = collector.collect(() => component(instance.memoProps))
 
+      if (typeof componentReturnValue !== 'function') {
+        throw new Error('Component must return a render function')
+      }
+
+      globalContext.current = beforeContext
+      instance.render = componentReturnValue
       const children = collector.collect(() => instance.render?.())
-      reconcileChildren(instance, childrenAsElements(children))
+      reconcileChildren(pluginContext, instance, childrenAsElements(children))
     }
 
-    if (instance.requiredUpdate) {
+    if (instance.needReRender) {
       const children = collector.collect(() => instance.render?.())
-      reconcileChildren(instance, childrenAsElements(children))
-      delete instance.requiredUpdate
+      reconcileChildren(pluginContext, instance, childrenAsElements(children))
+      delete instance.needReRender
     }
 
     // 处理依赖触发的更新
     collector.complete().forEach(ref => {
-      instance.context.addDisposer(watch(ref, () => {
-        instance.requiredUpdate = true
+      instance.context.addDisposer(watchSignal(ref, () => {
+        instance.needReRender = true
         onUpdateRequire?.(instance)
       }))
     })
@@ -515,7 +422,7 @@ export function performUnitOfWork(instance: Instance, onUpdateRequire?: OnUpdate
   // 浏览器组件/标签
   if (typeof element?.type === 'string') {
     if ('children' in element.props && Array.isArray(element.props.children)) {
-      reconcileChildren(instance, childrenAsElements(element.props.children))
+      reconcileChildren(pluginContext, instance, childrenAsElements(element.props.children))
     }
   }
 
diff --git a/source/render/common/plugins/context.ts b/source/render/common/plugins/context.ts
new file mode 100644
index 0000000..80e2cef
--- /dev/null
+++ b/source/render/common/plugins/context.ts
@@ -0,0 +1,14 @@
+import { Plugin } from '.'
+import { BasicLogic } from './internal/basic'
+import { InjectSystem } from './internal/inject'
+
+export class PluginContext {
+  plugins: Plugin[] = [
+    new BasicLogic(),
+    new InjectSystem()
+  ]
+
+  registerPlugin(...plugins: Plugin[]) {
+    this.plugins.push(...plugins)
+  }
+}
diff --git a/source/render/common/plugins/index.ts b/source/render/common/plugins/index.ts
new file mode 100644
index 0000000..dfb0b1c
--- /dev/null
+++ b/source/render/common/plugins/index.ts
@@ -0,0 +1,22 @@
+import { AirxElement, Props } from '../../../element'
+import type { Instance } from '../index'
+export { PluginContext } from './context'
+
+export interface Plugin {
+  /**
+   * 检查是否需要重新渲染
+   * 只要任意一个插件返回了 true，就一定会重新渲染，如果返回 void，则继续交给其他插件判断
+   */
+  isReRender?(instance: Instance): true | void
+
+  /**
+   * dom 更新方法
+   */
+  updateDom?(dom: Element, nextProps: Props, prevProps?: Props): void
+
+  /**
+ * 检查是否需要重新创建实例
+   * 只要任意一个插件返回了 false，就一定会重新创建实例，如果返回 void，则继续交给其他插件判断
+ */
+  isReuseInstance?(instance: Instance, nextElement: AirxElement): false | void
+}
diff --git a/source/render/common/plugins/internal/basic.ts b/source/render/common/plugins/internal/basic.ts
new file mode 100644
index 0000000..ae90bc6
--- /dev/null
+++ b/source/render/common/plugins/internal/basic.ts
@@ -0,0 +1,173 @@
+import { AirxChildren, AirxElement, Props } from '../../../../element'
+import { createLogger } from '../../../../logger'
+import { Instance } from '../../index'
+import { Plugin } from '../index'
+
+export class BasicLogic implements Plugin {
+  private logger = createLogger('basicLogicPlugin')
+
+  private isSameProps(preProps: Props, nextProps: Props): boolean {
+    if (Object.is(nextProps, preProps)) {
+      return true
+    }
+
+    if (
+      typeof preProps !== 'object'
+      || typeof nextProps !== 'object'
+      || preProps === null
+      || nextProps === null
+    ) {
+      this.logger.debug('props must be an object')
+      return false
+    }
+
+    // 对应 key 的值不相同返回 false
+    const prevKeys = Object.keys(preProps)
+    for (let index = 0; index < prevKeys.length; index++) {
+      const key = prevKeys[index]
+      if (key !== 'children' && key !== 'key') {
+        if (!Object.hasOwn(nextProps, key)) return false
+        if (!Object.is(preProps[key], nextProps[key])) return false
+      }
+
+      if (key === 'children') {
+        const prevChildren = preProps['children'] as AirxChildren[]
+        const nextChildren = nextProps['children'] as AirxChildren[]
+        // children 都是空的，则无需更新
+        if (prevChildren.length === 0 && nextChildren.length === 0) return true
+
+        // 简单比较一下 child 的引用
+        for (let index = 0; index < prevChildren.length; index++) {
+          const prevChild = prevChildren[index]
+          const nextChild = nextChildren[index]
+
+          if (prevChild !== nextChild) return false
+          if (typeof prevChild !== typeof nextChild) return false
+        }
+      }
+
+      return true
+    }
+
+    return false
+  }
+
+  isReRender(instance: Instance): true | void {
+    const nextProps = instance.element?.props
+    const preProps = instance.beforeElement?.props
+    if (!this.isSameProps(preProps, nextProps)) return true
+  }
+
+  updateDom(dom: Element, nextProps: Props, prevProps: Props = {}): void {
+    this.logger.debug('updateDom', dom, nextProps, prevProps)
+    const isKey = (key: string) => key === 'key'
+    const isRef = (key: string) => key === 'ref'
+    const isStyle = (key: string) => key === 'style'
+    const isClass = (key: string) => key === 'class'
+    const isEvent = (key: string) => key.startsWith("on")
+    const isChildren = (key: string) => key === 'children'
+    const isGone = (_prev: Props, next: Props) => (key: string) => !(key in next)
+    const isNew = (prev: Props, next: Props) => (key: string) => prev[key] !== next[key]
+    const isProperty = (key: string) => !isChildren(key) && !isEvent(key) && !isStyle(key) && !isClass(key) && !isKey(key) && !isRef(key)
+
+    // https://developer.mozilla.org/zh-CN/docs/Web/API/Node
+    if (dom.nodeName === '#text' || dom.nodeName === '#comment') {
+      const textNode = (dom as unknown as Text | Comment)
+      if (textNode.nodeValue !== nextProps.textContent) {
+        textNode.nodeValue = String(nextProps.textContent)
+      }
+      return
+    }
+
+    // remove old style
+    const oldStyle = prevProps?.style
+    if (typeof oldStyle === 'object' && oldStyle != null) {
+      if (!('style' in dom) || !dom.style) return
+      Object.keys(oldStyle).forEach(key => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        if ('style' in dom && dom.style) {
+          delete (dom.style as any)[key as any]
+          /* eslint-enable @typescript-eslint/no-explicit-any */
+        }
+      })
+    }
+
+    // add new style
+    const newStyle = nextProps?.style
+    if (typeof newStyle === 'object' && newStyle != null) {
+      if (!('style' in dom) || !dom.style) return
+      Object.keys(newStyle).forEach((key: unknown) => {
+        /* eslint-disable @typescript-eslint/no-explicit-any */
+        const value = (newStyle as any)?.[key as any];
+        (dom.style as any)[key as any] = value == null ? '' : value
+        /* eslint-enable @typescript-eslint/no-explicit-any */
+      })
+    }
+
+    if (dom.className !== nextProps?.class) {
+      if (!nextProps?.class) {
+        dom.removeAttribute('class')
+      } else if (typeof nextProps?.class === 'string') {
+        dom.setAttribute('class', nextProps?.class)
+      }
+    }
+
+    //Remove old or changed event listeners
+    Object.keys(prevProps)
+      .filter(isEvent)
+      .filter(
+        key =>
+          !(key in nextProps) ||
+          isNew(prevProps, nextProps)(key)
+      )
+      .forEach(name => {
+        const eventType = name
+          .toLowerCase()
+          .substring(2)
+
+        if (prevProps[name] == null) return
+        if (typeof prevProps[name] !== 'function') {
+          console.error('EventListener is not a function')
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          dom.removeEventListener(eventType as any, prevProps[name] as any)
+        }
+      })
+
+    // Add event listeners
+    Object.keys(nextProps)
+      .filter(isEvent)
+      .filter(isNew(prevProps, nextProps))
+      .forEach(name => {
+        const eventType = name
+          .toLowerCase()
+          .substring(2)
+        if (nextProps[name] == null) return
+        if (typeof nextProps[name] !== 'function') {
+          console.error('EventListener is not a function')
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          dom.addEventListener(eventType as any, nextProps[name] as any)
+        }
+      })
+
+    // Remove old properties
+    Object.keys(prevProps)
+      .filter(isProperty)
+      .filter(isGone(prevProps, nextProps))
+      .forEach(name => dom.setAttribute(name, ''))
+
+    // Set new or changed properties
+    Object.keys(nextProps)
+      .filter(isProperty)
+      .filter(isNew(prevProps, nextProps))
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      .forEach(name => dom.setAttribute(name, nextProps[name] as any))
+  }
+
+  isReuseInstance(instance: Instance, nextElement: AirxElement): false | void {
+    if (instance && instance.element && instance.element.type !== nextElement.type) {
+      return false
+    }
+  }
+}
diff --git a/source/render/common/plugins/internal/inject.ts b/source/render/common/plugins/internal/inject.ts
new file mode 100644
index 0000000..24ea762
--- /dev/null
+++ b/source/render/common/plugins/internal/inject.ts
@@ -0,0 +1,28 @@
+import { Plugin } from '..'
+import { Instance } from '../..'
+
+export class InjectSystem implements Plugin {
+  private getProvideValueForParent(instance: Instance | undefined, key: unknown): unknown {
+    if (instance && instance.context) {
+      const value = instance.context.providedMap.get(key)
+      if (value != undefined) return value
+      if (instance.parent) {
+        return this.getProvideValueForParent(instance.parent, key)
+      }
+    }
+
+    return undefined
+  }
+
+  isReuseInstance(instance: Instance): false | undefined {
+    const injectedKeys = [...instance.context.injectedMap.keys()]
+    for (let index = 0; index < injectedKeys.length; index++) {
+      const key = injectedKeys[index]
+      const currentValue = instance.context.injectedMap.get(key)
+      const parentValue = this.getProvideValueForParent(instance.parent, key)
+
+      // 如果发现任何值发生变化，则重建实例
+      if (parentValue !== currentValue) return false
+    }
+  }
+}
diff --git a/source/render/index.ts b/source/render/index.ts
index 1f46248..11d7af3 100644
--- a/source/render/index.ts
+++ b/source/render/index.ts
@@ -3,7 +3,7 @@ export {
   provide,
   onMounted,
   onUnmounted
-} from './common'
+} from './common/hooks'
 
-export { render as renderToDom } from './browser'
-export { render as renderToString } from './server'
+export { render } from './browser'
+export { Plugin, PluginContext } from './common/plugins'
diff --git a/source/render/server.ts b/source/render/server.ts
deleted file mode 100644
index 70b3fda..0000000
--- a/source/render/server.ts
+++ /dev/null
@@ -1,412 +0,0 @@
-import { CSSProperties } from '..'
-import { AirxElement } from '../element'
-import { createLogger } from '../logger'
-import { InnerAirxComponentContext, Instance as BaseInstance, performUnitOfWork } from './common'
-
-function camelToKebab(str: string): string {
-  return str.replace(/([A-Z])/g, (match, p1, offset) => {
-    if (offset === 0) {
-      return p1.toLowerCase()
-    } else {
-      return '-' + p1.toLowerCase()
-    }
-  })
-}
-
-class SsrHTMLElement {
-  static createTextNode(content: string) {
-    const dom = new SsrHTMLElement('#text')
-    dom.content = content
-    return dom
-  }
-
-  static createComment(content: string) {
-    const dom = new SsrHTMLElement('#comment')
-    dom.content = content
-    return dom
-  }
-
-  static createElement(tag: string) {
-    return new SsrHTMLElement(tag)
-  }
-
-  constructor(public nodeName: string) {
-    this.style = {}
-    this.content = ''
-    this.children = []
-    this.className = ''
-    this.attributes = new Map()
-  }
-
-
-  readonly firstChild?: SsrHTMLElement
-  readonly nextSibling?: SsrHTMLElement
-  readonly parentNode?: SsrHTMLElement
-
-  readonly className: string
-  readonly style: CSSProperties
-  private content: string
-  private children: SsrHTMLElement[]
-  private attributes: Map<string, string>
-
-  removeChild(dom: SsrHTMLElement) {
-    /* eslint-disable @typescript-eslint/ban-ts-comment */
-    const index = this.children.findIndex(v => v === dom)
-    if (index != -1) this.children.splice(index, 1)
-    // @ts-ignore
-    this.firstChild = undefined
-    // @ts-ignore
-    this.nextSibling = undefined
-    // @ts-ignore
-    this.parentNode = undefined
-    /* eslint-enable @typescript-eslint/ban-ts-comment */
-  }
-
-  appendChild(dom: SsrHTMLElement) {
-    /* eslint-disable @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    dom.parentNode = this
-
-    if (this.children.length > 0) {
-      // @ts-ignore
-      this.children[this.children.length - 1].nextSibling = dom
-    }
-
-    // @ts-ignore
-    this.firstChild = this.children[0]
-    this.children.push(dom)
-    /* eslint-enable @typescript-eslint/ban-ts-comment */
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  setAttribute(name: string, value: any) {
-    if (value === '') return this.attributes.delete(name)
-    /* eslint-disable @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    if (name === 'class') return this.className = value
-    // @ts-ignore
-    if (name === 'style') return this.style = value
-    /* eslint-enable @typescript-eslint/ban-ts-comment */
-    this.attributes.set(name, value)
-  }
-
-  removeAttribute(name: string) {
-    this.attributes.delete(name)
-  }
-
-  toString(): string {
-    if (this.nodeName === '#text') return this.content
-    if (this.nodeName === '#comment') return this.content
-
-    const className = this.className.length > 0 ? `class="${this.className}"` : ''
-    const styleString = Object.entries(this.style).map(([key, value]) => `${camelToKebab(key)}:${value}`).join(';')
-    const style = styleString.length > 0 ? `style="${styleString}"` : ''
-    const attributes = Array.from(this.attributes.entries()).map(([name, value]) => `${name}="${value}"`).join(' ')
-    return `<${this.nodeName} ${className} ${style} ${attributes}>${this.children.map(child => child.toString()).join('')}</${this.nodeName}>`
-  }
-}
-
-type Instance = BaseInstance<SsrHTMLElement>
-
-interface RenderContext {
-  rootInstance: Instance
-  needCommitDom: boolean
-  nextUnitOfWork: Instance | null
-}
-
-export function render(element: AirxElement, domRef?: SsrHTMLElement) {
-  const rootInstance: Instance = {
-    domRef: SsrHTMLElement.createElement('div') || domRef,
-    context: new InnerAirxComponentContext()
-  }
-  rootInstance.context.instance = rootInstance
-
-  const context: RenderContext = {
-    rootInstance,
-    nextUnitOfWork: null,
-    needCommitDom: false
-  }
-
-  const appInstance: Instance = {
-    element,
-    parent: context.rootInstance,
-    memoProps: { ...element.props },
-    context: new InnerAirxComponentContext()
-  }
-
-  appInstance.context.instance = appInstance
-
-  context.rootInstance.child = appInstance
-  context.nextUnitOfWork = appInstance
-
-  /**
-   * 提交 Dom 变化
-   */
-  function commitDom(rootInstance: Instance, rootNode?: SsrHTMLElement) {
-    const logger = createLogger('commitDom')
-    logger.debug('commitDom', rootInstance)
-
-    type PropsType = Record<string, unknown>
-
-    function updateDomProperties(dom: SsrHTMLElement, nextProps: PropsType, prevProps: PropsType = {}) {
-      const isKey = (key: string) => key === 'key'
-      const isRef = (key: string) => key === 'ref'
-      const isStyle = (key: string) => key === 'style'
-      const isClass = (key: string) => key === 'class'
-      const isEvent = (key: string) => key.startsWith("on")
-      const isChildren = (key: string) => key === 'children'
-      const isGone = (_prev: PropsType, next: PropsType) => (key: string) => !(key in next)
-      const isNew = (prev: PropsType, next: PropsType) => (key: string) => prev[key] !== next[key]
-      const isProperty = (key: string) => !isChildren(key) && !isEvent(key) && !isStyle(key) && !isClass(key) && !isKey(key) && !isRef(key)
-
-      // https://developer.mozilla.org/zh-CN/docs/Web/API/Node
-      if (dom.nodeName === '#text' || dom.nodeName === '#comment') {
-        const textNode = (dom as unknown as Text | Comment)
-        if (textNode.nodeValue !== nextProps.textContent) {
-          textNode.nodeValue = String(nextProps.textContent)
-        }
-        return
-      }
-
-      // remove old style
-      const oldStyle = prevProps?.style
-      if (typeof oldStyle === 'object' && oldStyle != null) {
-        Object.keys(oldStyle).forEach(key => {
-          /* eslint-disable @typescript-eslint/no-explicit-any */
-          delete dom.style[key as any]
-          /* eslint-enable @typescript-eslint/no-explicit-any */
-        })
-      }
-
-      // add new style
-      const newStyle = nextProps?.style
-      if (typeof newStyle === 'object' && newStyle != null) {
-        Object.keys(newStyle).forEach((key: unknown) => {
-          /* eslint-disable @typescript-eslint/no-explicit-any */
-          const value = (newStyle as any)?.[key as any]
-          dom.style[key as any] = value == null ? '' : value
-          /* eslint-enable @typescript-eslint/no-explicit-any */
-        })
-      }
-
-      if (dom.className !== nextProps?.class) {
-        if (!nextProps?.class) {
-          dom.removeAttribute('class')
-        } else if (typeof nextProps?.class === 'string') {
-          dom.setAttribute('class', nextProps?.class)
-        }
-      }
-
-      // //Remove old or changed event listeners
-      // Object.keys(prevProps)
-      //   .filter(isEvent)
-      //   .filter(
-      //     key =>
-      //       !(key in nextProps) ||
-      //       isNew(prevProps, nextProps)(key)
-      //   )
-      //   .forEach(name => {
-      //     const eventType = name
-      //       .toLowerCase()
-      //       .substring(2)
-
-      //     if (prevProps[name] == null) return
-      //     if (typeof prevProps[name] !== 'function') {
-      //       console.error('EventListener is not a function')
-      //     } else {
-      //       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      //       dom.removeEventListener(eventType as any, prevProps[name] as any)
-      //     }
-      //   })
-
-      // // Add event listeners
-      // Object.keys(nextProps)
-      //   .filter(isEvent)
-      //   .filter(isNew(prevProps, nextProps))
-      //   .forEach(name => {
-      //     const eventType = name
-      //       .toLowerCase()
-      //       .substring(2)
-      //     if (nextProps[name] == null) return
-      //     if (typeof nextProps[name] !== 'function') {
-      //       console.error('EventListener is not a function')
-      //     } else {
-      //       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      //       dom.addEventListener(eventType as any, nextProps[name] as any)
-      //     }
-      //   })
-
-      // Remove old properties
-      Object.keys(prevProps)
-        .filter(isProperty)
-        .filter(isGone(prevProps, nextProps))
-        .forEach(name => dom.setAttribute(name, ''))
-
-      // Set new or changed properties
-      Object.keys(nextProps)
-        .filter(isProperty)
-        .filter(isNew(prevProps, nextProps))
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .forEach(name => dom.setAttribute(name, nextProps[name] as any))
-    }
-
-    function getParentDom(instance: Instance): SsrHTMLElement {
-      if (instance.parent?.domRef != null) {
-        return instance.parent.domRef
-      }
-      if (instance.parent) {
-        return getParentDom(instance.parent)
-      }
-
-      throw new Error('Cant find dom')
-    }
-
-    /**
-     * 查找 instance 下所有的一级 dom
-     * @param instance 
-     * @returns 
-     */
-    function getChildDoms(instance: Instance): SsrHTMLElement[] {
-      const domList: SsrHTMLElement[] = []
-      const todoList: Instance[] = [instance]
-
-      while (todoList.length > 0) {
-        const current = todoList.pop()
-
-        // 找到真实 dom 直接提交
-        if (current?.domRef != null) {
-          domList.push(current.domRef)
-        }
-
-        // 有子节点但是无真实 dom，向下继续查找
-        if (current?.domRef == null) {
-          if (current?.child != null) {
-            todoList.push(current.child)
-          }
-        }
-
-        // 可能有兄弟节点，则需要继续查找
-        if (current?.sibling != null) {
-          todoList.push(current.sibling)
-        }
-      }
-
-      return domList
-    }
-
-    function commitInstanceDom(nextInstance: Instance, oldNode?: SsrHTMLElement) {
-      // 移除标删元素
-      if (nextInstance.deletions) {
-        for (const deletion of nextInstance.deletions) {
-          const domList = getChildDoms(deletion)
-          for (let index = 0; index < domList.length; index++) {
-            const dom = domList[index]
-            if (dom && dom.parentNode) dom.parentNode.removeChild(dom)
-          }
-          deletion.context.triggerUnmounted()
-        }
-
-        nextInstance.deletions.clear()
-      }
-
-      // 创建 dom
-      if (nextInstance.domRef == null) {
-        if (nextInstance.element == null) throw new Error('???')
-        if (typeof nextInstance.element.type === 'string') {
-          if (nextInstance.element.type === 'text') {
-            const textContent = nextInstance.element.props.textContent
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            nextInstance.domRef = SsrHTMLElement.createTextNode(textContent as string) as any
-          } else if (nextInstance.element.type === 'comment') {
-            const textContent = nextInstance.element.props.textContent
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            nextInstance.domRef = SsrHTMLElement.createComment(textContent as string) as any
-          } else {
-            nextInstance.domRef = SsrHTMLElement.createElement(nextInstance.element.type)
-          }
-        }
-      }
-
-      // 更新属性
-      if (nextInstance.domRef != null && nextInstance.element != null) {
-        updateDomProperties(
-          nextInstance.domRef,
-          nextInstance.element.props,
-          nextInstance.beforeElement?.props
-        )
-      }
-
-      // 插入 parent
-      // TODO: 针对仅移动时优化
-      if (nextInstance.domRef != null) {
-        if (oldNode !== nextInstance.domRef) {
-          if (nextInstance.domRef.parentNode) {
-            nextInstance.domRef.parentNode.removeChild(nextInstance.domRef)
-          }
-
-          const parentDom = getParentDom(nextInstance)
-          parentDom.appendChild(nextInstance.domRef)
-        }
-      }
-    }
-
-    function commitWalkV2(initInstance: Instance, initNode?: SsrHTMLElement) {
-      // 创建一个栈，将根节点压入栈中
-
-      type StackLayer = [Instance, SsrHTMLElement | undefined] | (() => void)
-      const stack: StackLayer[] = [[initInstance, initNode]]
-
-      while (stack.length > 0) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const stackLayer = stack.pop()!
-        if (typeof stackLayer === 'function') {
-          stackLayer()
-          continue
-        }
-
-        const [instance, node] = stackLayer
-        commitInstanceDom(instance, node)
-
-        // stack 是先入后出
-        // 实际上是先渲染 child
-        // 这里然后再渲染 sibling
-
-        // 执行生命周期的 Mount
-        stack.push(() => instance.context.triggerMounted())
-
-        // 更新下一个兄弟节点
-        if (instance.sibling != null) {
-          const siblingNode = instance.domRef
-            ? instance.domRef.nextSibling
-            : node?.nextSibling
-
-          stack.push([instance.sibling, siblingNode || undefined])
-        }
-
-        // 更新下一个子节点
-        if (instance.child != null) {
-          const childNode = instance.domRef
-            ? instance.domRef.firstChild
-            : node
-
-          stack.push([instance.child, childNode || undefined])
-        }
-      }
-    }
-
-    commitWalkV2(rootInstance, rootNode)
-  }
-
-  while (context.nextUnitOfWork) {
-    context.nextUnitOfWork = performUnitOfWork(
-      context.nextUnitOfWork as unknown as BaseInstance
-    ) as unknown as Instance
-  }
-
-  commitDom(
-    context.rootInstance.child,
-    context.rootInstance.domRef?.firstChild || undefined
-  )
-
-  return context.rootInstance.domRef?.toString()
-}