The patter of calling the methods in SPFx React life cycle are as below
Constructor method > ComponetWillMount > render method > ComponentDidMount > any custom methods on either button clicks > ComponentUnmount
In React, we just observe render method. But there are other methods which we can go through.
Step 1: First, I am creating a blank webpart with react framework.
Step 2:
Now in tsx file, we are going to create an interface. We are not using the interface which has in components folder .ts file for interface.
export interface IReactLifeCycleWPState{
stageTitle: string
}
Now, we need to extend in the .tsx file HTML part with our new interface we created.
export default class Reactlifecyclewebpart extends React.Component<IReactlifecyclewebpartProps, IReactLifeCycleWPState> {
Now, we need a constructor in .tsx file.
We are using a parameterized constructer with two interfaces are parameters. One is .ts file interface which is props interface and 2nd parameter is interface which we created above one is called state interface.
public constructor(props: IReactlifecyclewebpartProps, state: IReactLifeCycleWPState){
super(props);
// here meaning is we are calling our base class.
This.state interface is speaking to the interface which we created.
stateTitle is the interface we created. Now from our state it is speaking via this.state with curly braces.
this.state = {
stageTitle:'component constructor been called'
}
Now we need to implement componentwillmount method.
This function is getting called automatically before the rendering function takes place.
First constructer is getting called
ComponentWillMount is getting called then render method is called.
Thrid componentDidMount.
Before render, if we want to do anything, that we can do in componentWillMount method.
After ComponentWillMount called, then render method will be getting called.
Then after render method, ComponentDidMount will getting called.
If we have any custom methods like button click we are calling updateState method will be getting called after render method.
Inside componentDidMount, we will specify our state properties values by using setState function.
In our example, we are using console.log for componentWillMount and one console.log for componentDidMount for understand purpose.
Now how to render in render method.
Once webpart is removed from SP page, then componentWillUnmount is getting called.
.tsx file code:
import * as React from 'react';
import styles from './Reactlifecyclewebpart.module.scss';
import { IReactlifecyclewebpartProps } from './IReactlifecyclewebpartProps';
import { escape } from '@microsoft/sp-lodash-subset';
export interface IReactLifeCycleWPState{
stageTitle: string
}
export default class Reactlifecyclewebpart extends React.Component<IReactlifecyclewebpartProps, IReactLifeCycleWPState> {
public constructor(props: IReactlifecyclewebpartProps, state: IReactLifeCycleWPState){
super(props);
this.state = {
stageTitle:'component constructor been called'
}
this.updateState = this.updateState.bind(this);
console.log("Stage Title from Constructor: "+this.state.stageTitle);
}
public componentWillMount(){
console.log("componentWillMount has called");
}
public componentDidMount(){
console.log("Stage Title from componentDidMount: "+this.state.stageTitle);
this.setState({
stageTitle:'componentDidMount has called',
});
}
public updateState(){
this.setState({
stageTitle:'updateState has called',
});
}
public render(): React.ReactElement<IReactlifecyclewebpartProps> {
return (
<div>
<h1>ReactJS component's Lifecycle</h1>
<p>{this.state.stageTitle}</p>
<button onClick={this.updateState}>Click here to update the state data</button>
</div>
)
}
public componentWillUnmount(){
console.log("componentWillUnmount has called");
}
}
.tsx file full Code below for reference purpose:
Comments
Post a Comment