All doubt I have is in shouldComponentUpdate(), in the App component when i update the state (button click) everything is re-rendered and the updated state is only passed as props to Lifecycle component then How this.props.text in the Lifecycle component refers to the previous state's value ...... Its like magic for me? kindly post your thoughts
class App extends React.Component{
constructor(){
super();
this.state = {
text : "hello_"
}
}
handle = () =>{
this.setState({text : this.state.text+'hello_'})
}
render(){
return(
<div>
<p>
{'App' + this.state.text}
</p>
<button onClick = {this.handle}> click </button>
<Lifecycle text = {this.state.text}/>
</div>
)
}
}
Lifecycle.js
class Lifecycle extends React.Component{
constructor(props){
super(props);
}
shouldComponentUpdate(nextProps, nextState){
console.log('shouldComponentUpdate', nextProps, this.props.text)
return true
}
render(){
return(
<div>
{this.props.text}
</div>
)
}
}```
Aucun commentaire:
Enregistrer un commentaire