import React, { Component } from ‘react’
const ThemeContext = React.createContext();
export default class LifeCycle extends Component {
static defaultProps = {
name : "计数器"
}
constructor(props){
super(props);
this.state = {number:0};//初始化默认状态对象
console.log("1.初始化");
}
componentWillMount(){
console.log("2.组件将要挂载");
}
componentDidMount(){
console.log("4.组件挂载完成");
}
shouldComponentUpdate(){
console.log("5.询问组件是否需要更新");
return true;
}
componentWillUpdate(){
console.log("6.组件将要更新");
}
componentDidUpdate(){
console.log("7.组件更新完成");
}
add = () =>{
this.setState({
number:this.state.number+1
});
}
render() {
console.log("3.6-7.渲染阶段");
**const props = {
color:"red"
}**
return (
**<ThemeContext.Provider value = {props}>**
<div>
<p>{this.state.number}</p>
<button onClick = {this.add}>+</button>
{this.state.number/2 == 1 ? "" : <SubCounter number = {this.state.number}/>}
</div>
**</ThemeContext.Provider>**
)
}
}
class SubCounter extends Component{
static contextType = ThemeContext;
componentWillReceiveProps(){
console.log(“props-1.组件将要收到新的属性”);
}
shouldComponentUpdate(props,state){
return props ? false : true
}
componentWillUnmount(){
console.log(“props-.组件被卸载”);
}
render(){
console.log(“props-2.渲染”);
return(
<>
{this.props.number}
</>
)
}
}
class SubSubCounter extends Component{
static contextType = ThemeContext;
render(){
console.log("props-2.渲染");
return(
<div style = {{color:**this.context.color**}}>
<p>{"测试数据"}</p>
</div>
)
}
}