import React, { Component } from 'react'
class Cpn extends Component{
render(){
return (
<div>我是Cpn组件</div>
)
}
componentWillUnmount(){
console.log('调用了cpn的componentWillUnmount方法')
}
}
export default class App extends Component {
constructor(){
super();
this.state = {
counter:0,
isShow:true
}
console.log('执行了constructor方法');
}
componentDidMount(){
console.log('执行了组件componentDidMount方法');
}
componentDidUpdate(){
console.log('执行了组件componentDidUpdate方法');
}
render() {
console.log('执行了组件render方法');
return (
<div>
<h2>App组件</h2>
<h2>当前计数：{this.state.counter}</h2>
<button onClick={e => this.increment()}>+1</button>
<hr />
<button onClick={e => this.changeCpnShow()}>切换</button>
{this.state.isShow && <Cpn/> }
</div>
)
}
increment(){
this.setState({
counter:this.state.counter + 1
})
}
changeCpnShow(){
this.setState({
isShow:!this.state.isShow
})
}
}
