` //初始化阶段:由ReactDom.render() 触发初次渲染 // constructor() // componentWillMount() // render() // componentDidMount() //一般在这个钩子中做初始化的事,开启定时器、发送请求、订阅消息
//更新阶段:组件内部this.setState()或者父组件render触发的时候
// shouldComponentUndate()
// componentWillUpdate();
// render()
// componentDidUpdate()
//卸载组件;有ReactDom.unmountComponentAtNode()触发
// componentWillUnMount() 一般在这个钩子做收尾的事,关闭定时器、取消订阅
class Count extends React.Component{
constructor(props){
console.log(constructor);
super(props)
}
state = {count : 0}
add = () => {
const { count } = this.state
this.setState({count:count + 1})
}
death = () => {
ReactDom.unmountComponentAtNode(document.getElementById("test"))
}
force = () => {
this.forceUpdate();
}
//组件将要挂载调用
componentWillMount(){
console.log(componentWillMount);
}
//组件将要卸载的时候
componentWillUnMount(){
this.death()
}
shouldComponentUndate(){
//这个钩子,如果不写默认返回值是true
console.log("shouldComponentUndate");
}
//组件将要更新时候调用
componentWillUpdate(){
console.log("componentWillUpdate");
}
//组件更新完后调用
componentDidUpdate(){
console.log("componentDidUpdate");
}
//组件挂载完毕的钩子
componentDidMount(){
console.log(componentDidMount);
}
//render过程进行挂载组件
render() {
const {count} = this.state
return <div>
<h2>求和结果{count}</h2>
<button onClick = {this.add}>+</button>
<button onClick = {this.death}>+</button>
<button onClick = {this.force}>+</button>
</div>
}
}
class A extends React.Component{
state = {carName:"222"}
changeCar = () => {
const {carName} = this.state
this.setState({carName: '111'})
}
render (){
<div>
<div>a</div>
<button onClick = {this.changeCar}></button>
<B carName={this.state.carName} />
</div>
}
}
class B extends React.Component{
// 接收父组件新的props值的时候调用的钩子
componentWillReceiveProps(){
console.log("componentWillReceiveProps");
}
render (){
<div>b{this.props.carName}</div>
}
}`