react你很懵的生命周期

有竟者事竟成,今天又是努力的一天,加油!加油!加油!!!

理解

组件从创建到死亡它会经历一些特定的阶段。
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。

生命周期旧

在这里插入图片描述

  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    1.constructor()
    2.componentWillMount()
    3.render()
    4.componentDidMount() ====> 常用
    一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅信息
  2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1.shouldComponentUpdate()
    2.componentWillUpdate()
    3.render() ====> 必须使用的一个
    4.componentDidUpdate()
  3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1.componentWillUnmount() ====> 常用
    一般这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅信息

生命周期新

在这里插入图片描述

  1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    1.constructor()
    2.getDerivedStateFromProps
    3.render()
    4.componentDidMount()
  2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    1.getDerivedStateFromProps
    2.shouldComponentUpdate()
    3.render()
    4.getSnapshotBeforeUpdate
    5.componentDidUpdate()
  3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    1.componentWillUnmount()

重要的勾子

1.render:初始化渲染或更新渲染调用
2.componentDidMount:开启监听, 发送ajax请求
3.componentWillUnmount:做一些收尾工作, 如: 清理定时器

即将废弃的勾子

	1.componentWillMount
	2.componentWillReceiveProps
	3.componentWillUpdate

现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值