VUE与React的生命周期对比
Vue和React都是当前最流行的JavaScript框架,它们有各自的组件/UI元素的生命周期。以下是这两个框架生命周期的基本概念和代码示例。
- 挂载(Mounting)阶段:
Vue:
new Vue({
el: '#app',
beforeCreate: function () {
console.log('beforeCreate')
},
created: function () {
console.log('created')
},
beforeMount: function () {
console.log('beforeMount')
},
mounted: function () {
console.log('mounted')
}
})
React:
class App extends React.Component {
componentWillMount() {
console.log('componentWillMount')
}
componentDidMount() {
console.log('componentDidMount')
}
render() {
return (
<div>Hello, world!</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
- 更新(Updating)阶段:
Vue:
vm.$forceUpdate()
React:
this.forceUpdate()
- 卸载(Unmounting)阶段:
Vue:
vm.$destroy()
React:
ReactDOM.unmountComponentAtNode(document.getElementById('root'))
- 错误处理(Error Handling):
Vue:
Vue.config.errorHandler = function (err, vm, info) {
// handle error
}
React:
componentDidCatch(error, info) {
// Handle error
}
以上是Vue和React生命周期的部分对比,具体的生命周期钩子和方法可能还有更多,但以上是最常见的部分。
评论已关闭