vue生命周期和react生命周期对比。

生命周期
指的是组件从初始化开始到结束的过程  或者是生命周期是描述组件从开始到结束的过程,每个组件都具有生命周期,都对组件通过生命周期给予的钩子函数进行管理。
钩子函数
	指的是系统某些状态和参数发生改变的时候,系统立马去通知对应处理的函数叫做

vue的生命周期

	所有的生命周期钩子自动绑定Vue的 this 上下文到实例中,因此可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 。

分为11个周期,都是函数类型,常用的有8个阶段。vue生命周期和react生命周期对比。_第1张图片

vue常用8个钩子函数




    
    
    
    Document
    


    

生命周期

{{ title }}

剩下的三个周期分别是在Updated之后的有activated(keep-alive 组件激活时调用。)
,deactivated(keep-alive 组件停用时调用).
errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

react生命周期

react组件经历总体阶段
1、mounted阶段 加载阶段 或者说初始化阶段 这个阶段组件由jsx转换成真实dom
2、update阶段 组件运行中阶段 或者更新阶段 当组件修改自身状态,或者父组件修改子组件属性的时候发生的阶段
3、umount阶段 组件卸载阶段 这个一般是组件被浏览器回收的阶段
vue生命周期和react生命周期对比。_第2张图片

在mounted阶段

低版本有五个钩子函数,高版本只有三个
getDefaultProps 取得默认属性(高版本移除)
getInitialState 初始化状态(高版本移除)
componentWillMount 即将进入dom
render 描画dom
componentDidMount 已经进入dom

componentWillMount(){
console.log('组件将要挂载')
// 可以进行交互
}
componentDidMount(){
console.log('组件挂载到DOM上')
// 可以进行交互
}

在那种钩子函数中进行交互更好呢?请查看–>WillMount() pk DidMount()

在update阶段

运行中阶段只有在父组件修改了子组件的属性或者说一个组件修改自身的状态才会发生的情况

1、组件将要接受新值componentWillReceiveProps(已加载组件收到新的参数时调用)

2、组件是否更新 shouldComponentUpdate (影响整个项目的性能,决定视图的更新)

3、组件即将更新 componentWillUpdate

4、必不可少的render

5、组件更新完毕时运行的函数 componentDidUpdate

componentWillReceiveProps(a){
console.log(a)
// 当属性发生变化会执行,一般在字符传值用的比较多。
console.log('组件将要接受新的属性值')
}
shouldComponentUpdate(a){
// 可以接受形参,为未改变的属性值
console.log(a)
// 组件是否允许更新 影响整个项目的性能,决定视图的更新
return true
}
componentWillUpdate(){
console.log('组件将要更新')
}
componentDidUpdate(){
console.log('组件更新完成')
}

在umount阶段

此阶段可将整个组件销毁
调用的钩子函数是

ReactDOM.unmountComponentAtNode('节点')

vue生命周期对比react生命周期

初始阶段:
vue生命周期和react生命周期对比。_第3张图片
二阶段
vue生命周期和react生命周期对比。_第4张图片

三阶段
vue生命周期和react生命周期对比。_第5张图片

你可能感兴趣的:(vue与react生命周期对比)