react雕刻网站——react生命周期（6）

react的生命周期

react生命周期提供了几个很重要的节点。其实就是一些触发的事件来让组件更方便的处理各种场景。

图解、

在执行西安免得代码时

可以看出函数的加载顺序，

实现一个很简单的功能

这里我总爱写成this.state({})的错误形式

加载执行顺序

删除元素

完整的JSX

import React from "react";

import ReactDOM from "react-dom";

// import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

class APP extends React.Component{

     //构造函数

     constructor(props){

         super(props);

         this.state={

             data:"123",

             haschild:true

         }

         console.log("constructor")

     }

     //将要加载的时候执行

     componentWillMount(){

        console.log("componentWillMount")

     }

     //挂载完成

     componentDidMount(){

         console.log("componentDidMount")

     }

     //将要接受父组件传来的props

     componentWillReceiveProps(){

        console.log(" componentWillReceiveProps")

    }

    //是否更新子组件

    shouldComponentUpdate(){

        console.log("  shouldComponentUpdate,更改");

        return true;

    }

    //组件将要更新

    componentWillUpdate(){

       console.log("  componentWillUpdate")

    }

    //更新完成

    componentDidUpdate(){

        console.log("componentDidUpdate")

    }

     //将要接受父组件传来的props

     componentWillReceiveProps(){

         console.log(" componentWillReceiveProps")

     }

     //是否更新子组件

     shouldComponentUpdate(){

        return true

     }

     //组件将要更新

     componentWillUpdate(){

        console.log("  componentWillUpdate")

     }

     //更新完成

     componentDidUpdate(){

        console.log("  componentDidUpdate")

     }

     //组件将要销毁

     componentWillUnmount(){

        console.log("  componentWillUnmount")

     }

    handleClick(){

        this.setState({

            data:"456"

        })

    }

    handledel(){

        this.setState({

            haschild:false

        })

    }

    //渲染

     render(){

         console.log("render")

         return(



                 {

                     this.state.haschild ?






{this.state.data}



                     :null

                 }

             {this.handleClick()}}>改变内容

             {this.handledel()}}>删除内容



         )

     }

}

class Component extends React.Component{

    constructor(props){

        super(props);

    }

    render(props){

        return(



        )

    }

}

ReactDOM.render(

        /*组件的返回方法*/






,

        document.getElementById("app")

);

import React from "react";

import ReactDOM from "react-dom";

// import ReactSwiper from 'reactjs-swiper';

import "./index.scss"

class APP extends React.Component{

     //构造函数

     constructor(props){

         super(props);

         this.state={

             data:"123",

             haschild:true

         }

         console.log("constructor")

     }

     //将要加载的时候执行

     componentWillMount(){

        console.log("componentWillMount")

     }

     //挂载完成

     componentDidMount(){

         console.log("componentDidMount")

     }

     //将要接受父组件传来的props

     componentWillReceiveProps(){

        console.log(" componentWillReceiveProps")

    }

    //是否更新子组件

    shouldComponentUpdate(){

        console.log("  shouldComponentUpdate,更改");

        return true;

    }

    //组件将要更新

    componentWillUpdate(){

       console.log("  componentWillUpdate")

    }

    //更新完成

    componentDidUpdate(){

        console.log("componentDidUpdate")

    }

     //将要接受父组件传来的props

     componentWillReceiveProps(){

         console.log(" componentWillReceiveProps")

     }

     //是否更新子组件

     shouldComponentUpdate(){

        return true

     }

     //组件将要更新

     componentWillUpdate(){

        console.log("  componentWillUpdate")

     }

     //更新完成

     componentDidUpdate(){

        console.log("  componentDidUpdate")

     }

     //组件将要销毁

     componentWillUnmount(){

        console.log("  componentWillUnmount")

     }

    handleClick(){

        this.setState({

            data:"456"

        })

    }

    handledel(){

        this.setState({

            haschild:false

        })

    }

    //渲染

     render(){

         console.log("render")

         return(



                 {

                     this.state.haschild ?






{this.state.data}



                     :null

                 }

             {this.handleClick()}}>改变内容

             {this.handledel()}}>删除内容



         )

     }

}

class Component extends React.Component{

    constructor(props){

        super(props);

    }

    render(props){

        return(



        )

    }

}

ReactDOM.render(

        /*组件的返回方法*/






,

        document.getElementById("app")

);

// class Child1 extends React.Component{

//     constructor(props){

//         super(props)

//         this.state={

//             bgColor:"#fff"

//        }

//     }

//     handleClick(){

//       this.props.callback("red")

//     };

//     render(){

//         return(

//

//
1的背景色: {this.state.bgColor}

//             {this.handleClick(e)}}>改变父组件的背景颜色

//

//         );

//     }

// }

// class Child2 extends React.Component{

//     constructor(props){

//         super(props)

//         this.state={

//             bgColor:"#399"

//        }

//     }

//     render(props){

//         return(

//

//
2的背景色: {this.props.cool}

//

react雕刻网站——react生命周期（6）

1的背景色: {this.state.bgColor}

2的背景色: {this.props.cool}

你可能感兴趣的:(react雕刻网站——react生命周期（6）)