2.2 实例演示生命周期

实例一

class Life extends React.Component{
    //挂载阶段
    constructor(props){
        super(props);
        console.log("constructor()");
    };

    componentWillMount(){
        console.log("componentWillMount()")
    };

    render(){
        console.log("render()");
        return (
            <div>
            <h1>组件生命周期</h1>
            </div>
        )
    }

    componentDidMount(){
        console.log("componentDidMount()")
    };

    //更新(运行)阶段
    shouldComponentUpdate(){
        console.log("shouldComponentUpdate()")
    }

    componentWillUpdate(){
        console.log("componentWillUpdate()")
    }

    componentDidUpdate(){
        console.log("componentDidUpdate()");
    }

    //卸载阶段
    componentWillUnmount(){
        console.log("componentWillUnmount()")
    }

}

ReactDOM.render(
    <Life />,
    document.getElementById("root")
);

实例二

class Life extends React.Component{
    //挂载阶段
    constructor(props){
        super(props);
        console.log("constructor()");
        this.state = {
            age : 1
        }
    };

    UNSAFE_componentWillMount(){
        console.log("componentWillMount()")
    };

    render(){
        console.log("render()");
        return (
            <div>
            <h1>我是树妖，今年{this.state.age}了</h1>
<button onClick={()=>ReactDOM.unmountComponentAtNode(root)}>砍树</button>
</div>
)
}

componentDidMount(){
    //网络请求，消息发布，订阅一般都在此生命周期内完成

    //开启定时器
    console.log("定时器正在默默工作！");
    this.interValId = setInterval(()=>{
        this.setState({
            age : this.state.age + 1
        });
    },2000);
};

//更新(运行)阶段

// shouldComponentUpdate(){
//     console.log("shouldComponentUpdate()")
// }

UNSAFE_componentWillUpdate(){
    console.log("componentWillUpdate()-------------")
}

componentDidUpdate(){
    console.log("componentDidUpdate()");
}

//卸载阶段
componentWillUnmount(){
    console.log("componentWillUnmount()");
    //清除定时器  如果不清除的话好像定时器也停掉了
    clearInterval(this.interValId)

}

}

ReactDOM.render(
    <Life />,
    document.getElementById("root")
);