import React, { Component } from 'react'
import FirstChild from './firstchild.js';
export class first extends Component {
//special function that is get called whenever a new component is created
//purpose:--inializing local state
//binding event handler method to an instance
//no http call
constructor(props) {
super(props)
this.state = {
}
console.log("constructor called")
}
//rear use
//the state depends on changes in props over time
static getDerivedStateFromProps(props,state){
console.log("getderived state");
return null;
}
//if you neeed to load data from a remote end point.(network request)
componentDidMount(){
console.log("component did mount");
}
//reads props and state and return jsx
//children component lifecyle can also work
render() {
console.log("render");
return (
<div>
<FirstChild ></FirstChild>
</div>
)
}
}
export default first
import React, { Component } from 'react'
export class firstchild extends Component {
constructor(props) {
super(props)
this.state = {
count:0,
}
console.log("child of first cons");
}
//method is called every time a component is re render
//set the state[state depands on props]
//mount...update1
static getDerivedStateFromProps(props,state){
console.log("getderived state of first child");
return null;
}
componentDidMount(){
console.log("component did mount of first child");
}
//update..2
//deictates if the component should rerender or not
//preformance optimization
shouldComponentUpdate(prevprops,prevstate){
console.log("componet update call");
return null;
}
//update4[ called right before the changes from the virtual dom are to be
reflected in the dom like scroll position of cursor if you need]
getSnapshotBeforeUpdate(){
console.log("snapshot parent");
return null;
}
//update 5..
//if render is finished in the re-render cylces
componentDidUpdate(){
console.log("parent component did update");
}
Change=()=>{
this.setState({
count:2
})
}
render() {
console.log("first child render")
return (
<div>
{this.state.count}
<button onClick={this.Change}>click</button>
</div>
)
}
}
export default firstchild
Comments
Post a Comment