OMI - Web Components Framework

Lifecycle

Lifecycle method	When it gets called
`install`	before the component gets mounted to the DOM
`installed`	after the component gets mounted to the DOM
`uninstall`	prior to removal from the DOM
`beforeUpdate`	before update
`updated`	after update
`beforeRender`	before `render()`
`rendered`	after `render()`,the first parameter is the virtual DOM, which can be changed to change the rendering result
`receiveProps`	parent element re-render will trigger it, `return false` will prevent update action

For example:

tsx

import { render, Component, tag } from 'omi'

@tag('my-timer')
class MyTimer extends Component {
  data = {
    seconds: 0
  }

  tick() {
    this.data.seconds++
    this.update()
  }

  install() {
    this.interval = setInterval(() => this.tick(), 1000)
  }

  uninstall() {
    clearInterval(this.interval)
  }

  render() {
    return <div>Seconds: {this.data.seconds}</div>
  }
}

render(<my-timer />, 'body')

import { render, Component, tag } from 'omi'

@tag('my-timer')
class MyTimer extends Component {
  data = {
    seconds: 0
  }

  tick() {
    this.data.seconds++
    this.update()
  }

  install() {
    this.interval = setInterval(() => this.tick(), 1000)
  }

  uninstall() {
    clearInterval(this.interval)
  }

  render() {
    return <div>Seconds: {this.data.seconds}</div>
  }
}

render(<my-timer />, 'body')

Lifecycle ​

Lifecycle