25
loading...
React React-Life-Cycle
``React web app are actually a collection of component. Every react component has own lifecycle, that are different stage of component extention.
A react component has four stage of lifecycle.
For example:
For example:
Initialization:
It’s a starting point of stage.Here the component start his journey. This is the stage where the developer initial state and props .
It’s a starting point of stage.Here the component start his journey. This is the stage where the developer initial state and props .
Its following method is bellow:
getDefaultProps()
its used to specify the default value of this.props.
its used to specify the default value of this.props.
getInitialState()
its used to specify the default value of this.state.
its used to specify the default value of this.state.
Mounting:
Mounting phase is instance of component is created and inserted into the dom. In this phase our component render at the first time. Mounting represent of the rendering component.
Mounting phase is instance of component is created and inserted into the dom. In this phase our component render at the first time. Mounting represent of the rendering component.
The method is available phase is:
**componentWillMount();
This function get invoked before the render function is executed for the first time.
This function get invoked before the render function is executed for the first time.
componentDidMount();
This function get invoked ones after the render function is executed for the first time .
This function get invoked ones after the render function is executed for the first time .
Updating:
The next phase is Updating. A component is update , when there is a change props or state in the component. The phase is updating some user event instruction.
The next phase is Updating. A component is update , when there is a change props or state in the component. The phase is updating some user event instruction.
There are some available method in updating phase:
setState():
This function is used to update the state of a component.
This function is used to update the state of a component.
shouldComponentUpdate():
This function is invoked before rendering mounted component when new props or state being recieaved.
This function is invoked before rendering mounted component when new props or state being recieaved.
componentWillUpdate():
This function is invoked before the component rendered.
This function is invoked before the component rendered.
componentDidUpdate()
Similarly this function is invoked after the component rendered and update props or state.
Similarly this function is invoked after the component rendered and update props or state.
UnMounting
This is the final stage of phase in react lifecycle. Where the component remove from the page.
This is the final stage of phase in react lifecycle. Where the component remove from the page.
This Unmounting phase following the method is:
componentWillUnMount():
The function get invoked before the remove component from the page. And its end of lifecyle.
The function get invoked before the remove component from the page. And its end of lifecyle.
*React JSX
*
JSX means JavaScript Syntax Extension. Its referred JavaScript as XML. JSX is a react extension to the JavaScript language. It produce react element. JSX allows to use write HTML directly in JavaScript react.
*
JSX means JavaScript Syntax Extension. Its referred JavaScript as XML. JSX is a react extension to the JavaScript language. It produce react element. JSX allows to use write HTML directly in JavaScript react.
Example:
const function=()=>{
return(
# Header
return(
# Header
Jsx
25