React学习13----生命周期函数

文档：https://reactjs.org/docs/react-component.html

在这里插入图片描述

React生命周期函数：
组件加载之前，组件加载完成，以及组件更新数据，组件销毁。
触发的一系列的方法，这就是组件的生命周期函数

组件加载的时候触发的函数：
constructor 、componentWillMount、 render 、componentDidMount

组件数据更新的时候触发的生命周期函数：
shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

你在父组件里面改变props传值的时候触发的：
componentWillReceiveProps

组件销毁的时候触发的：
componentWillUnmount

必须记住的生命周期函数：
组件加载的时候依次执行（重要）：componentWillMount、 render 、componentDidMount（dom操作，请求数据）
组件销毁的时候执行（重要）：componentWillUnmount
更新的时候：componentWillUpdate、render、componentDidUpdate

测试程序如下：
项目结构：
在这里插入图片描述

Lifecycle.js



/*
文档：
https://reactjs.org/docs/react-component.html


React生命周期函数：

    组件加载之前，组件加载完成，以及组件更新数据，组件销毁。

    触发的一系列的方法 ，这就是组件的生命周期函数


组件加载的时候触发的函数：

    constructor 、componentWillMount、 render 、componentDidMount

组件数据更新的时候触发的生命周期函数：

    shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

你在父组件里面改变props传值的时候触发的：

    componentWillReceiveProps

组件销毁的时候触发的：

    componentWillUnmount

必须记住的生命周期函数：
    组件加载的时候依次执行（重要）：componentWillMount、 render 、componentDidMount（dom操作，请求数据）
    组件销毁的时候执行（重要）：componentWillUnmount
    更新的时候：componentWillUpdate、render、componentDidUpdate


*/


import React, { Component } from 'react';

class Lifecycle extends Component {
    constructor(props) {

        console.log('01构造函数');
        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;
    }

    //将要更新数据的时候触发

    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 />
                <br />

                <button onClick={this.setMsg}>更新msg的数据</button>
            </div>
        );
    }
}

export default Lifecycle;

App.js 中

import React, { Component } from 'react';


import Lifecycle from './components/Lifecycle.js';


class App extends Component {

    constructor(props){
        super(props);

        this.state={
            title:'我是app组件的title',
            flag:true
        }

    }
    setFlag=()=>{

        this.setState({

            flag:!this.state.flag
        })
    }
    setTitle=()=>{

        this.setState({

            title:'我是app组件改变后的title'
        })
    }
    render() {
        return (
            <div className="App">

                {
                    this.state.flag?<Lifecycle title={this.state.title} />:""
                }


                <br />
                <br />

                <hr />

                <br />
                <br />


                <button onClick={this.setFlag}>挂载和销毁声明周期函数组件</button>


                <br />
                <br />

                <button onClick={this.setTitle}>改变父组件title的值</button>
            </div>
        );
    }
}

export default App;

源码下载：
https://download.csdn.net/download/zhaihaohao1/10980372
rdemo13

React学习13----生命周期函数

猜你喜欢