vue与react的生命周期对比

219 阅读3分钟

我正在参加「掘金·启航计划」
它们都有自己的生命周期方法,用于控制组件的创建、更新和销毁过程。下面是Vue和React生命周期的对比:

Vue生命周期:

  • beforeCreate:实例刚刚被创建,数据观测 (data observer) 和事件配置还未开始。
  • created:实例已经创建完成,此阶段可以访问到配置项和响应的数据,但 DOM 还未生成,无法进行DOM相关的操作。
  • beforeMount:在挂载之前被调用,此阶段可以进行一些准备工作,但此时组件还未替换真实的DOM。
  • mounted:在挂载完成后被调用,实例的视图已经渲染到了DOM中,此时可以进行DOM操作和异步请求等。
  • beforeUpdate:数据更新前被调用,可以在更新前对组件进行修改或执行一些额外的操作。
  • updated:数据更新后被调用,此时DOM已重新渲染,可以执行DOM操作。
  • beforeDestroy:实例销毁前被调用,可以进行一些清理工作。
  • destroyed:实例销毁后被调用,所有的事件监听器会被移除,子组件也会被销毁。

React生命周期(旧版):

  • componentWillMount:组件即将被挂载到DOM前被调用。
  • componentDidMount:组件已经被挂载到后被调用,可以进行DOM操作和异步请求等。
  • componentWillReceiveProps:父组件 props 发生变化时,子组件将会接收到新的props,并执行相应的处理。
  • shouldComponentUpdate:在组件更新前被调用,返回一个布尔值,决定是否需要更新组件。
  • componentWillUpdate:在组件更新前被调用,此时不能调用setState方法。
  • componentDidUpdate:在组件更新后被调用,可以进行DOM操作或异步请求等。
  • componentWillUnmount:组件即将被销毁前被调用,可进行一些清理工作。

image.png

初始化阶段:由ReactDOM.render()触发---初次渲染

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
    一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息

更新阶段:由组件内部this.setState()或父组件render触发

  • shouldComponetUpdate()
  • componentWillUpdat()
  • render()
  • componentDidUpdate()

卸载组件:由ReactDOM.unmountComponentAtNode()触发

  • componentWillUnmount() ===> 常用
    一般在这个钩子函数做一些收尾的事,例如:关闭定时器、取消订阅消息

React生命周期(新版): React 16.3之后,部分生命周期方法发生了改变:

  • getDerivedStateFromProps:props发生变化时调用,返回新的状态。用于替代旧版的componentWillReceiveProps。
  • getSnapshotBeforeUpdate:在组件更新前被调用,在render之后,DOM更新之前执行。返回的任何值都将作为参数传递给componentDidUpdate,常用于获取更新前的DOM状态。

需要注意的是,React已经宣布在未来版本中可能会移除一些废弃的生命周期方法。

总结:
Vue和React的生命周期都提供了一系列钩子函数,以便开发者在组件不同阶段执行定制化的操作。 Vue的生命周期相对更加直观和简单,而React则经历了一些变化,使用了较新的生方法。 无论是Vue还是React,理解和使用生命周期方法对于确保组件的正确渲染和优化性能非常重要。