详解React组件生命周期中挂载、更新和卸载三个阶段

一、挂载阶段

这个阶段是指组件被创建,初始化执行,并且被挂载到DOM中,完成组件的第一次渲染。以下为它依次调用的生命周期方法:
(1)constructor (2)componentWillMount (3)render (4)componentDidMount

1、constructor
相信大家多少都了解构造方法,这个构造方法主要负责接收一个props参数、初始化组件的state以及绑定事件处理方法等工作。prpos是从父组件传入的属性对象,如果父组件中没有传入属性而组件自身定义了默认属性,那么这个props指向的就是组件自己的默认属性,并且必须在这个构造方法中首先调用super(props)才能保证props被传入组件中。

2、componentWillMount
这个方法是在组件被挂载到DOM前调用,且只会被调用一次。我个人理解这个方法在实际的项目中用到得很少,因为需要在该方法中执行的工作完全都可以提前到constructor中。
!!注意:在这个方法中调用this.setState不会引起组件的重新渲染哦。(个人理解,因为组件渲染的前提是将组件挂载到DOM节点,然而这个方法恰恰是在组件被执行挂载之前调用)

3、render
这个是定义组件的唯一并且必要的方法。在这个方法中,会根据组件的props和state返回一个React元素,用于描述组件的UI
!!注意点:render并不负责组件的实际渲染工作,它只是返回一个UI的描述,真正渲染出页面是由DOM和React自身来负责。所以不能在render中调用this.setState。

4、componentDidMount
该方法在组件被挂载到DOM后调用,且只会被调用一次。调用这个方法的时候已经获取到DOM结构了,因此依赖于DOM节点的一系列操作都可以放到这个方法中。这个方法通常还会被用于向服务器请求数据,dispatch action等等。this.setState在该方法中被调用会引起组件的重新渲染(我猜应该会有人理解不了了,重新渲染之前组件肯定会被重新挂载到DOM,那不是会继续调用这个方法,陷入死循环吗?)。
注意:第一句话就是这个方法只会被调用一次!也就是说在这个组件没有被卸载之前都不能重复调用这个方法了。 咦?那我如果后续想继续更新这个组件怎么办呢?继续看下面的更新阶段!

二、更新阶段

额,,,不好意思,刚刚主管喊我写需求了。先太监,,后续会在我的下一篇博客更新。
嘤嘤嘤~

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值