常用的生命周期函数
作者:互联网
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 }) }
}
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 }) }
}
标签:常用,console,log,counter,周期函数,生命,isShow,state,组件 来源: https://www.cnblogs.com/eric-share/p/15125172.html