• 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!!!

  • 相关阅读:
    题解 DTOJ #1438. 矮人排队(lineup)
    题解 DTOJ #4423. 「THUSC2019」塔
    题解 DTOJ #4123.「2019冬令营提高组」全连
    题解 DTOJ #4016.辉夜的夜空明珠(moon)
    题解 DTOJ #2498.大步小步(babystep)
    题解 DTOJ #3326.组队(group)
    题解 DTOJ #1515.三塔合一
    题解 DTOJ #2305.Bazarek
    【code】Splay 模板
    寻找乱序数组中第K大的数
  • 原文地址:https://www.cnblogs.com/szkjoker717666/p/12294053.html
Copyright © 2020-2023  润新知