React(组件生命周期检测)

repeat.js

import React, { Component } from 'react';

class Chil extends React.Component{


    componentWillMount(){
        console.log("即将创建")
    }

    componentDidMount(){
        console.log("刚创建完")
    }

    componentWillUpdate()
    {
        console.log("即将更新")
    }

    componentDidUpdate()
    {
        console.log("更新完毕")
    }
    componentWillReceiveProps(){
        console.log("参数更新了")
    }

    componentWillUnmount(){
        console.log("即将销毁")
    }

    render(){
        return <div>{this.props.name}</div>
    }
}

class Par extends React.Component{
    constructor(...args){
        super(...args)
        this.state={i:0}
    }
    fn(){
        this.setState({
            i:this.state.i++ 
        })
    }
    
    render(){
        this.state.i++
        
        return <div>
        <input type="button" onClick={this.fn.bind(this)} value="增加"/>
        <Chil name={this.state.i} />
        </div>
    }
}
export default Par;

index.js

ReactDOM.render(<Par />, document.getElementById('root'))

var des=document.getElementById('destroy')

des.onclick=function(){
    //注意是</div>不是<div/>
    ReactDOM.render(<div>Par组件已被销毁</div>, document.getElementById('root')) 
}
registerServiceWorker();

运行效果

生命周期