While working on ReactJS the render()
method will be enough in case of ideal and simple conditions of components, But
in case of complex situations and conditions, We need some more control over
the when, how and where components to execute or update. Lifecycle methods of
React help in that case to control and execute things as per requirement only.
Purpose of this document to describes the
role of every component in lifecycle and order of execution of those
components. Using these lifecycle methods we can control render, update of each
section. Knowledge of this lifecycle will help to perform various actions while
components are created and destroyed, also in updating components and to react
on props or state change.
Component Flow:
React allows to create component invoking the ‘create-Class ()’ which
expects ‘render ()’ and triggers a lifecycle.
A] Initial Rendering:
·
Get default props & Get initial state
·
Component will mount
·
Render
·
Component did mount
·
Component will receive props
·
Should component update
·
Component will update
·
Render
·
Component did mount
·
Should component update
·
Component will update
·
Render
·
Component did update
·
Component will unmount
Both methods are called once while initial rendering of the component.
The Get Initial State ()
enables to set the initial state value. Get default props used to access default props using this Props.
Invoked before render method, On the
Client as well Server side. Setting state in this component phase will not
trigger.
This phase will be executed on client side after the render method only.
We can update the state here to trigger other methods. The set State () can be
used here.
4) Component Will Receive Props:
This phase will be called as soon as the props are updated, before the
render is called. Sometimes component will receive props is just called when
nothing has changed, for check in purpose by the react. The set state () can be
used here.
5) Should Component Update:
This returns Boolean output, It’s set to true by
default. If sure that component do not needs to render after state or props are
updated, can return false value also. The set state () can’t
be used here.
This phase is called just before the Rendering. It can also be used
instead component will receive props but without access to previous props. The set
state () can’t be used here.
This phase is called just after the Rendering. The set state () can be
used here.
8) Component Will Unmount:
This phase is invoked after the component is unmounted from the DOM.
It’s the unmounting of component in main.js. It helps to clean the
leftover debris from the component. The set state () can’t be called here.
Example:
Class ({
/** Object from this method sets the
initial value of this.state
getInitialState: fun1 =()=> {
return {};
},
/** The object from this method sets the initial value of this.props
getDefaultProps: fun2 =()=> {
return {};
},
/** Inspects this.state and this.props
/** Should never update this.state or this.props
render: return () {
return (<div> </div>);
},
/** +++++++Lifecycle Methods++++++++ */
/** Invoked once before first render
componentWillMount: fun3 = () => {
/** Calling setState here does not cause a re-render
},
/** Invoked once after the first render
componentDidMount: function = () => {
},
/** Invoked when there is any prop change
/** Called BEFORE render
componentWillReceiveProps: function = (nextProps) => {
/** Not called for the initial render
/** Previous props can be accessed by this.props
/** Calling setState here does not trigger an additional re-render
},
/** Determines if the render method should run in the subsequent step
/** Called BEFORE a render
/** Not called for the initial render
shouldComponentUpdate: function = (nextProps, nextState) => {
/** If you want the render method to execute in the next step
/** return true, else return false
return true/false;
},
/** Called IMMEDIATELY BEFORE a render
componentWillUpdate: function = (nextProps, nextState) => {
/** You cannot use this.setState() in this method
},
/** Called IMMEDIATELY AFTER a render
componentDidUpdate: function = (prevProps, prevState) => {
},
/** Called IMMEDIATELY BEFORE a component is unmounted
componentWillUnmount: function = () => {
}
});
Please Feel Free to share your Comments.....
getInitialState: fun1 =()=> {
return {};
},
/** The object from this method sets the initial value of this.props
getDefaultProps: fun2 =()=> {
return {};
},
/** Inspects this.state and this.props
/** Should never update this.state or this.props
render: return () {
return (<div> </div>);
},
/** +++++++Lifecycle Methods++++++++ */
/** Invoked once before first render
componentWillMount: fun3 = () => {
/** Calling setState here does not cause a re-render
},
/** Invoked once after the first render
componentDidMount: function = () => {
},
/** Invoked when there is any prop change
/** Called BEFORE render
componentWillReceiveProps: function = (nextProps) => {
/** Not called for the initial render
/** Previous props can be accessed by this.props
/** Calling setState here does not trigger an additional re-render
},
/** Determines if the render method should run in the subsequent step
/** Called BEFORE a render
/** Not called for the initial render
shouldComponentUpdate: function = (nextProps, nextState) => {
/** If you want the render method to execute in the next step
/** return true, else return false
return true/false;
},
/** Called IMMEDIATELY BEFORE a render
componentWillUpdate: function = (nextProps, nextState) => {
/** You cannot use this.setState() in this method
},
/** Called IMMEDIATELY AFTER a render
componentDidUpdate: function = (prevProps, prevState) => {
},
/** Called IMMEDIATELY BEFORE a component is unmounted
componentWillUnmount: function = () => {
}
});
Please Feel Free to share your Comments.....
Comments
Post a Comment