OMI生命周期
| Lifecycle method | When it gets called |
|---|---|
install | 准备插入到文档 |
installed | 插入到文档之后 |
uninstall | 从文档中移除 |
beforeUpdate | update 之前 |
updated | update 之后 |
beforeRender | render() 之前 |
rendered | render() 之后，第一个参数是虚拟DOM，可以改变它改变渲染结果 |
receiveProps | 父元素重新渲染触发，返回 false 可阻止更新 |
举个例子:
tsx
import { render, Component, tag } from 'omi'
@tag('my-timer')
class MyTimer extends Component {
seconds = 0
tick() {
this.seconds++
this.update()
}
install() {
this.interval = setInterval(() => this.tick(), 1000)
}
uninstall() {
clearInterval(this.interval)
}
render() {
return <div>秒: {this.seconds}</div>
}
}
render(<my-timer />, 'body')import { render, Component, tag } from 'omi'
@tag('my-timer')
class MyTimer extends Component {
seconds = 0
tick() {
this.seconds++
this.update()
}
install() {
this.interval = setInterval(() => this.tick(), 1000)
}
uninstall() {
clearInterval(this.interval)
}
render() {
return <div>秒: {this.seconds}</div>
}
}
render(<my-timer />, 'body')