React解密:React生命周期是什么

了解react的运行机制,生命周期是一个绕不过去的话题,那么react的生命周期会经历哪些阶段呢?在我看来应该是会经历四个阶段:

一、初始化阶段

在我们编写类组件的时候,我们常常会有这样的代码:

import React, { Component } from 'react'

class App extends Component {
    contructor (props) {
        super(props)
    }
}

export default App

这也是组件的初始化阶段,首先会继承自react的Component,然后执行上面App组件的构造函数。正因为此,在组件中才能使用一些使用生命周期函数等,而在函数组件中不能使用生命周期函数。super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件,供子组件读取(组件中props只读不可变,state可变)。而constructor()用来做一些组件的初始化工作,如定义this.state的初始内容。

二、组件的挂载阶段

在组件的挂在阶段,首先会执行的生命周期函数是componentWillMount,从字面意思就可以看出,willMount,也就是组件挂在到DOM之前调用,而且此函数只会被调用一次,所以,也可以做一些初始化的操作。但是一般都会会提前到contractor中,所以此函数用的比较少。

第二个就是render函数。根据组件的props或者是state的变化,return一个react的元素,不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用。

最后直接的就是componentDidMount函数,此函数是在组件挂在完成之后执行,也只会被调用一次。

三、组件的更新阶段

当父组件发生变化,需要重新更新,那么子组件也会一起被重新渲染,此时,在子组件中即可调用shouldComponentUpdate函数对子组件是否需要重新渲染作出手动优化。

当父组件重新render的时候,意味着会对子组件重新传入props,此时可以调用componentWillReceiveProps函数,对props进行操作,可以将传入的props转化成自生组件的state。在此函数中调用setState并不会引起第二次渲染。是因为componentWillReceiveProps中判断props是否变化了,若变化了,this.setState将引起state变化,从而引起render,此时就没必要再做第二次因重传props引起的render了,不然重复做一样的渲染了。

然后就是componentWillUpdate,组件在更新之前调用。在这边可执行一些组件更新发生前的工作,一般较少用。

render,开启更新渲染。

componentDidUpdate更新之后。此方法在组件更新后被调用,可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state。

四、卸载阶段

卸载阶段,只执行了一个生命周期函数,componentWillUnmount,当组件卸载后需要执行的生命周期函数。

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值