ComponentDidUpdate() function:
Ø Similarly this function is invoked after the component is
rerendered.
Ø This function gets invoked once after the render()
function is executed after the updation of state (or) props.
§ Render()
Ø It is invoked to examine this.props and this.state and
return one of the following Types: React
element,Array and fragments, Booleans or null ,string and Number.
Ø It shouldComponentUpdate() returns false, the code inside
render() will be invoked again to ensure that the component displays itself
properly.
Changes in index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root')
);
class Lifecycle extends React.Component{
constructor(){
super();
this.state={initialvalue:"Welcome",name:" Students"}
}
componentWillMount(){
alert("Learn ReactJs");
}
render(){
return<div><h1>{this.state.initialvalue}{this.state.name}</h1>
<br/>
<button type='button' onClick={this.changevalue}>changevalue</button>
</div>
}
changevalue=()=>{
this.setState({initialvalue:"Learn ReactJs"});
}
componentDidMount(){
setTimeout(()=>{
this.setState({initialvalue:"Thank You"})},5000)
}
componentWillUpdate(){
alert("Do you want update a new value");
}
componentDidUpdate(){
document.getElementById('mydiv').innerHTML="NEW VALUE UPDATED SUCCESSFULLY "+this.state.initialvalue;
}
}
var mystyle={color:'green',textAlign:'center'}
const element =<div style={mystyle}><Lifecycle /></div>;
root.render(element);
Changes in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app
is installed on a
user's mobile device or desktop. See
https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public`
folder during the build.
Only files inside the `public` folder can be
referenced from the HTML.
Unlike "/favicon.ico" or
"favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a
non-root public URL.
Learn how to configure a non-root public URL by
running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this
app.</noscript>
<div id="root"></div>
<div id="mydiv"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see
an empty page.
You can add webfonts, meta tags, or analytics to this
file.
The build step will place the bundled scripts into the
<body> tag.
To begin the development, run `npm start` or `yarn
start`.
To create a production bundle, use `npm run build` or
`yarn build`.
-->
</body>
</html>
Output
shouldComponentUpdate() and
componentWillUnmount() to Deleting Header using this.setState
changes in index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width,
initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app
is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder
during the build.
Only files inside the `public` folder can be
referenced from the HTML.
Unlike "/favicon.ico" or
"favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a
non-root public URL.
Learn how to configure a non-root public URL by
running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this
app.</noscript>
<div id="root"></div>
<div id="mydiv"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see
an empty page.
You can add webfonts, meta tags, or analytics to this
file.
The build step will place the bundled scripts into the
<body> tag.
To begin the development, run `npm start` or `yarn
start`.
To create a production bundle, use `npm run build` or
`yarn build`.
-->
</body>
</html>
changes in index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root')
);
class Lifecycle extends React.Component{
constructor(){
super();
this.state={initialvalue:"Welcome",name:" Students"}
}
componentWillMount(){
alert("Learn ReactJs");
}
render(){
return<div><h1>{this.state.initialvalue}{this.state.name}</h1>
<br/>
<button type='button' onClick={this.changevalue}>changevalue</button>
<button type='button' onClick={this.deleteheader}>Deleteheader</button>
</div>
}
changevalue=()=>{
this.setState({initialvalue:"Learn ReactJs"});
}
componentDidMount(){
setTimeout(()=>{
this.setState({initialvalue:"Thank You"})},5000)
}
componentWillUpdate(){
alert("Do you want update a new value");
}
componentDidUpdate(){
document.getElementById('mydiv').innerHTML="NEW VALUE UPDATED SUCCESSFULLY "+this.state.initialvalue;
}
shouldComponentUpdate(){
return true;
}
deleteheader=()=>{
this.setState({initialvalue:false,name:false})
}
componentWillUnmount(){
alert("Header Deleted");
}
}
var mystyle={color:'green',textAlign:'center'}
const element =<div style={mystyle}><Lifecycle /></div>;
root.render(element);
Output
Clicking ChangeValue the output
will be:
Clicking DeleteHeader output will
be:
No comments:
Post a Comment