React旧的声明周期回调函数<=>生命周期钩子函数<=>生命周期函数<=>生命周期钩子

本文详细介绍了React组件的生命周期,包括componentWillMount、componentDidMount、componentWillUnmount等关键阶段,并阐述了它们在组件创建、更新及卸载时的调用顺序。此外,还提到了shouldComponentUpdate、componentWillUpdate和componentDidUpdate在控制组件更新中的作用。通过理解这些生命周期方法,开发者可以更好地管理组件状态和性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件在创建到死亡他会经历一系列的特殊阶段,组件中包含一系列钩子函数,会在特定的时间调用

一、componentWillMount 组件挂载之前调用 

二、componentDidMount组件挂载完毕调用======>常用,一般在这做初始化的事(开启定时器,发送网络请求,订阅消息)

三、componentWillUnmount组件卸载之前调用=====>常用,一般做一些收尾的事情(关闭定时器,取消订阅消息)

        卸载组件unmountComponentAtnode(document.getElementById('id'))

四、shouldComponentUpdate 控制组件更新的阀门,返回ture更新,返回false不更新,必须返回true或者false

五、componentWillUpdate 组件将要更新

六、componentDidUpdate 组件更新

七、componentWillReceiveProps 父组件将要更新传给子组件的props

八、调用顺序

        挂载:componentWillMount =>render=>componentDidMount=>componentWillUnmount

        调用setState函数:shounldComponentUpdate=>componentwillUpdate=>render=>componentDidUpdate=>componentWillUnmount

        this.forceUpdate():componentwillUpdate=>render=>componentDidUpdate=>componentWillUnmount

        父组件更新子组件props:componentWillReceiveProps=>shounldComponentUpdate=>componentwillUpdate=>render=>componentDidUpdate=>componentWillUnmount

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值