vue 和 react 生命周期的总结
好久没写博客了,今天抽点时间总结解一下大雷讲的有关生命周期的知识点:
vue生命周期(钩子函数):
- beforeCreate(){}--->2.Create--->3.beforeMount---->4.mounted --->5.beforeUpdate--->6updated---->7.beforeDestroy ---->8.destoryed
常用的举例说明:
beforeCreate(){
//this.say()//这里会报错 this没有
},
created(){ //这里可以使用this 数据请求
this.username="leson";
},
beforeMount(){//页面结构加载完成以前
},
mounted(){//页面结构完成
//写dom操作 定时器
//事件 window.onscroll
},
updated(){
console.log(this.userage);
},
constructor(props) {
//接收父组件传来的数据
//声明当前组件 自己的数据
super(props);
this.state = {
num: 10,
};
console.log("初始化1"); //页面最开始加载时
}
componentDidMount() {
//页面加载完成以后的数据请求
console.log("页面结构加载完成");
}
componentDidUpdate() {
//componentDidUpdate 数据修改完毕的时候
console.log("更新完毕");
}
componentWillUnmount() {
//componentWillUnmount 离开页面的时候
console.log("销毁");
}
shouldComponentUpdate(nextProps, nextState) {
//console.log(nextState); 控制数据修改后,页面是否渲染
if (nextState.num % 2 == 0) {
return true;
}
return false;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// getSnapshotBeforeUpdate 记录数据更改前的上一次数据 --缓存作用
console.log(prevState.num);
return null;
}
render() {
//横跨两个生命周期 渲染页面
console.log("开始渲染页面2");
return (
<div>
生命周期{this.state.num}
<button
onClick={() => {
this.setState({
num: this.state.num + 1,
});
}}
>
+
</button>
</div>
);
}
