React:新旧生命周期及其对比

概述

不管是vue还是React,它都有一个生命周期,它描述了组件从创建到销毁的整个生命过程,其中含有有很多的钩子函数连接而成。这里主要讲React新旧生命周期,以及他们的对比


生命周期(旧)

周期图如下
在这里插入图片描述

其中左边是挂载时,右边是更新时,下边是卸载时

挂载时

可以看出挂载时的更新数据顺序依次如下
1)constructor:构造器
2)componentWillMount:组件将要挂载
3)render:渲染
4)componentDidMount:组件挂载完成

可以通过代码来进行验证

  class Life extends React.Component{
   
            // 构造器
            constructor(props){
   
                super(props)
                console.log("constructor");
            }
            // 组件将要挂载的钩子
            componentWillMount(){
   
                console.log("componentWillMount");
            }
            // 渲染
            render(){
   
                console.log("render");
                return(
                    <div>
                        <button onClick={
   this.remove}>卸载组件</button>
                    </div>
                )
            }
            // 组件挂载完毕的钩子
            componentDidMount(){
   
                console.log("componentDidMount");
            }
            // 组件将要卸载的钩子
            componentWillUnmount(){
   
                console.log("componentWillUnmount");
            }
            remove=()=>{
   
                ReactDOM.unmountComponentAtNode(document.getElementById("root"))
            }
        }
        ReactDOM.render(<Life/>,document.getElementById("root"))

打印结果如图
在这里插入图片描述
当然这并不和函数声明顺序有关,这里不更改顺序做演示。

更新时

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值