常用的react生命周期:

本文详细介绍了React组件的生命周期,包括初始化加载时的constructor、getDerivedStateFromProps、render和componentDidMount,以及更新阶段的getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate和componentDidUpdate。在componentDidMount中常用于启动定时器和网络请求,componentWillUnmount则用于清理资源。了解这些生命周期对于优化React应用性能至关重要。

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

 react的生命周期:

初始化加载的时候:

由ReactDOM.render()触发---初次渲染

1.  constructor()

2.  getDerivedStateFromProps 

 3.  render()

4.  componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事,例如:开启定时                                                            器、发送网络请求、订阅消息

	      //构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
			}

			//若state的值在任何时候都取决于props,那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

           render(){}

          //组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

更新的时候:

 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

                                1.  getDerivedStateFromProps

                                2.  shouldComponentUpdate()

                                3.  render()

                                4.  getSnapshotBeforeUpdate

                                5.  componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

                                1.  componentWillUnmount()  =====> 常用一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值