Today I will introduce the basic lifecycle of components in reactjs, including what stages and what functions will each phase call?
Hope to discuss with you guys.
What is life cycle? It is the life cycle of an object from birth, growth to death.
Note: Life cycles in this tutorial for class components, understanding life cycle is very important to understand how reactjs components work.
1. Definition:
The life cycle of a component in reactjs is the process from creating, modifying, and destroying a component.
Consists of 3 stages:
Mounting
Updating
UnMounting
Looking at the diagram above we will know when Component
- Mounting (create) will call which functions: (constructor, render, DidMount).
- Updating(change) what functions to call (render, DidUpdate).
- Unmounting (cancel) will call the WillUnmount function.
Next I will introduce some commonly used functions: Constructor, render, DidMount, WillUnmount, DidUpdate
2. Constructor
When component mouting (created) will go through the Constructor . function
In the constructor will declare the state, the properties (properties) of the component.
Note: super(props) to call the constructor of the parent React.Component component that the child Component inherits from.
|
1 2 3 4 5 6 7 |
<span class="token keyword">class</span> <span class="token class-name">Clock</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>date<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3. DidMount()
- When the component is Mounting (created) after going through the Constructor function and rendering for the first time, it will call the DidMount() function.
- Usually used to call api to get data, setState to update state
Like the example below: call the api to get the comment content and then setState to render it again. (now there is comment content taken from api)
Note The DidMount() function only runs once when the component is created.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">fetchPosts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> posts<span class="token operator">:</span> response<span class="token punctuation">.</span>posts <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">fetchComments</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> comments<span class="token operator">:</span> response<span class="token punctuation">.</span>comments <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4. WillUnMount()
When component unmounting (cancellation) we will call the function WillUnMount(). When we don’t render the component or turn the page, the component will be destroyed to render the new content. Used to cancel timeout, clearInterval. (if not canceled, it will run continuously), reset data if necessary.
Note: the WillUnMount() function only runs once when the component is in the component’s lifecycle. Similarly, Mount() only runs once. And DidUpdate() can be called multiple times if there are multiple updates
|
1 2 3 4 |
<span class="token function">componentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">clearInterval</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>timerID<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
4. DidUpdate()
- Used when the Updating component will call the function DidUpdate()
- DidUpdate() may not be called or called multiple times if there is an update to the component.(when props change, state changes or update is required (forceUpdate)
- When rendering will trigger the DidUpdate() function call.
Note: Be careful when using DidUpdate() to strictly manage the changes of props, state. If you are not careful, there is a possibility that it will be rendered many times, causing the program to slow down. There are even cases of endless looping due to state changes inside DidUpdate() function.
Refer :
https://www.tutorialspoint.com/reactjs/reactjs_component_life_cycle.htm https://reactjs.org/docs/state-and-lifecycle.html