React生命周期

Posted szkjoker717666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React生命周期相关的知识,希望对你有一定的参考价值。

一、生命周期函数

概念:简单来说就是在程序运行的过程中,会自行执行的函数,被称为生命周期函数。

React生命周期函数分为三个阶段,分别是:

1.初始化阶段(挂载或加载阶段)

2.更新阶段

3.销毁阶段

 

初始化阶段里有四个生命周期函数:

getDefaultProps()可以设置组件的默认属性;componentWillMount()是组件将要挂载时触发的函数,只调用一次;

render()是组件在创建虚拟dom,进行diff算法,更新dom树时在此函数中进行;componentDidMount()是组件挂在完成时触发的函数;

更新阶段里有四个生命周期函数:

shouldComponentUpdate()是否要更新数据时触发的函数;componentWillUpdate()将要更新数据时触发的函数;

render()是组件渲染时触发的函数;componentDidUpdate()数据更新完成时触发的函数;

销毁阶段里有一个生命周期函数:

componentWillUnmount()是组件卸载时调用;

单独说一下componentWillreceiveProps,父组件中改变了props传值时触发的函数,也就是当父组件给子组件传值的时候改变了props的值时触发的函数,shouldComponentUpdate函数中的第一个参数nextProps就是父组件给子组件传的值。

下面来把以上代码详细说明一下

一、挂载部分

第一步首先是constructor及this.state里的初始数据。接着就是componentWillMount组件将要开始挂载了。第三步是render解析渲染,render数据都渲染完成,最后就是componentDidMount组件挂载完成。

代码如下:

 

import React ,{Component} from ‘react‘

class TodoList extends Component{
    constructor(props){
        console.log(‘01构造函数‘)        
        super(props)
        this.state={
            
        }
    }
    //组件将要挂载时候触发的生命周期函数
    componentWillMount(){
        console.log(‘02组件将要挂载‘)
    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount(){
        console.log(‘04组件将要挂载‘)
    }
    render(){
        console.log(‘03数据渲染render‘)
        return(
            <div>
                生命周期函数演示
            </div>
        ) 
    }
}
export default TodoList
————————————————
版权声明:本文为CSDN博主「尘生杜若丶」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43851769/article/details/88188325

 

打开控制台查看

技术图片

 

二、数据更新部分

第一步是shouldComponentUpdate()确认是否要更新,当这个函数返回true的时候才会进行更新,并且这个函数可以声明两个参数nextProps和nextState,nextProps是父组件给子组件的值,nextState是数据更新之后的值,这两个值都可以在这个函数中获取到。第二步是当确定更新数据之后componentWillUpdate将要更新数据,第三步依旧是render()数据发生改变render重新进行了渲染。第四步是componentDidUpdate数据更新完成。

 

 

import React ,{Component} from ‘react‘

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            msg:‘我是一个msg数据‘
        }
    }
    //是否要更新数据,如果返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log(‘01是否要更新数据‘)
        console.log(nextProps)        //父组件传给子组件的值,这里没有会显示空
        console.log(nextState)        //数据更新后的值
        return true;                //返回true,确认更新
    }
    //将要更新数据的时候触发的
    componentWillUpdate(){
        console.log(‘02组件将要更新‘)
    }
    //更新数据时候触发的生命周期函数
    componentDidUpdate(){
        console.log(‘04组件更新完成‘)
    }
    //更新数据
    setMsg(){
        this.setState({
            msg:‘我是改变后的msg数据‘
        })
    }
    render(){
        console.log(‘03数据渲染render‘)
        return(
            <div>
                {this.state.msg}
                <br/>
                <hr/>
                <button onClick={()=>this.setMsg()}>更新msg的数据</button>
            </div>
        ) 
    }
}
export default TodoList
————————————————
版权声明:本文为CSDN博主「尘生杜若丶」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43851769/article/details/88188325

控制台结果如下:

技术图片

 

 

 三、销毁阶段

下面是子组件完整代码:

import React ,{Component} from ‘react‘

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            msg:‘我是一个msg数据‘
        }
    }
    //组件将要挂载时候触发的生命周期函数
    componentWillMount(){
        console.log(‘02组件将要挂载‘)
    }
    //组件挂载完成时候触发的生命周期函数
    componentDidMount(){
        //Dom操作,请求数据放在这个里面
        console.log(‘04组件挂载完成‘)
    }
    //是否要更新数据,如果返回true才会更新数据
    shouldComponentUpdate(nextProps,nextState){
        console.log(‘01是否要更新数据‘)
        console.log(nextProps)        //父组件传给子组件的值,这里没有会显示空
        console.log(nextState)        //数据更新后的值
        return true;                //返回true,确认更新
    }
    //将要更新数据的时候触发的
    componentWillUpdate(){
        console.log(‘02组件将要更新‘)
    }
    //更新数据时候触发的生命周期函数
    componentDidUpdate(){
        console.log(‘04组件更新完成‘)
    }
    //你在父组件里面改变props传值的时候触发的函数
    componentWillReceiveProps(){
        console.log(‘父子组件传值,父组件里面改变了props的值触发的方法‘)
    }
    setMsg(){
        this.setState({
            msg:‘我是改变后的msg数据‘
        })
    }
    //组件将要销毁的时候触发的生命周期函数,用在组件销毁的时候执行操作
    componentWillUnmount(){
        console.log(‘组件销毁了‘)
    }
    render(){
        console.log(‘03数据渲染render‘)
        return(
            <div>
                生命周期函数演示--{this.state.msg}--{this.props.title}
                <br/>
                <hr/>
                <button onClick={()=>this.setMsg()}>更新msg的数据</button>
            </div>
        ) 
    }
}
export default TodoList
————————————————
版权声明:本文为CSDN博主「尘生杜若丶」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_43851769/article/details/88188325

 

over!!!

 

以上是关于React生命周期的主要内容,如果未能解决你的问题,请参考以下文章

关于片段生命周期

调用 replace() 时片段的生命周期是啥?

Android片段生命周期:onResume调用了两次

在不存在的片段上调用片段生命周期和 onCreate 的问题

导航上的片段生命周期重叠

Android 片段生命周期