react组件的生命周期

本文详细介绍了React组件的生命周期,分为初始化、运行中和销毁三个阶段,并列举了各阶段可用的钩子函数及其作用,帮助开发者更好地理解React组件的工作原理。

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

react组件本质上是状态机,输入确定,输出一定确定。
状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。
组件生命周期之钩子函数:“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听

组件的生命周期可分为3个部分:

         一.  mount

         二.  updating

         三.  unmount

 

1.初始化状态时可调用的钩子函数(mount):如下
getDefaultProps:设置props的初始值,只会调用一次。
组件生命周期之实例化操作:getInitialState,componentWillMount,render,componentDidMount,
执行顺序如上排序
每当组件被调用时,都会触发实例化函数
每当this.setState触发时,都会调用render函数,而不会去调用组件的其他实例化操作。

 

2.运行中阶段时可调用的钩子函数(updating):如下

componentWillReceiveProps:组件将要接收到属性的时候调用。父组件修改属性触发,可以修改新属性、修改状态。
shouldComponentUpdate:组件是否需要更新,当组件接收到新属性或新状态的时候会被调用。如果返回false,后面的render函数就不会被调用,调高性能。
componentWillUpdate:组件将会被更新。不能修改属性和状态。
render:跟初始化阶段的render函数一样。
componentDidUpdate:组件已经被更新。可以修改DOM。

执行顺序如上排序

第一次加载时(初始化)不会触发上述钩子函数,当state状态改变时触发。

 

3.销毁中阶段时可调用的钩子函数(unmount):如下

componentWillUnmount:销毁前调用

转载于:https://www.cnblogs.com/8080zh/p/9303605.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值