<div id="app"></div>
class ComponentParent extends React.Component {
constructor(){
super();
console.log("Parent constructor");
this.state = {
name: 'John'
}
}
componentWillMount() {
console.log("Parent componentWillMount");
}
componentDidMount(){
console.log("Parent componentDidMount");
}
componentWillReceiveProps() {
console.log("Parent componentWillRecieveProps");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("Parent shouldComponentUpdate");
return true;
}
componentWillUpdate(){
console.log("Parent componentWillUpdate");
}
componentDidUpdate(prevProps, prevState){
console.log("Parent componentDidUpdate");
}
componentWillUnmount(){
console.log("Parent componentWillUnmount");
}
render() {
console.log("Parent render");
return (
<section>
Hello <ComponentChild name={this.state.name}/>
</section>
)
}
}
class ComponentChild extends React.Component {
constructor(){
super();
console.log("Child constructor");
}
componentWillMount() {
console.log("Child componentWillMount");
}
componentDidMount(){
console.log("Child componentDidMount");
}
componentWillReceiveProps() {
console.log("Child componentWillRecieveProps");
}
shouldComponentUpdate(nextProps, nextState) {
console.log("Child shouldComponentUpdate");
return true; //false will stop re-rendering of this component
}
componentWillUpdate(){
console.log("Child componentWillUpdate");
}
componentDidUpdate(prevProps, prevState){
console.log("Child componentDidUpdate");
}
componentWillUnmount(){
console.log("Child componentWillUnmount");
}
render() {
console.log("Child render");
return(
<span>Child {this.props.name}</span>
)
}
}
ReactDOM.render(<ComponentParent/>, document.getElementById('app'))
View Compiled
This Pen doesn't use any external CSS resources.