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();
运行效果
生命周期
