React Lifecycle - React Vernacular Campaign 10

Table of contents

Preface

The previous article explains more about React syntax, React JSX - React Vernacular Campaign 06 Learn how to build a React component and learn that there are parent-child relationships between components.This article will focus on the components and explain the life cycle of the components included:

Three Stages of the Life Cycle
Lifecycle of a class of objects
Lifecycle of Letter Objects

The three phases of the React lifecycle

What is the LifeCycle?

We can imagine that the component itself has some states, such as: created, updated by the user, updated due to data modification, and finally deleted when the component is not needed. Usually, these states are in a sequential order, hence the life cycle.

Usually the life cycle is illustrated with the following diagram, which clearly illustrates the three stages of the life cycle

Source:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

As you can see from the picture above, there are three blocks:

Mounting
Updating
Unmounting

In React components, it also revolves around these three stages to do component loading, update rendering, and deletion.

Lifecycle of Class Components

A class component has a life cycle. Because a class component is itself an object, it has the characteristics of an object.

Hooks have been introduced to make them easier to understand, but they are currently used as functions.

The following is sample program code for the class components:

				
					import React, { Component } from &#039;react&#039; class Test extends Component { constructor(props) { super(props) this.state = { message: &#039;&#039; } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ message: &#039;Hello World!&#039; }) } render() { return (
            <div>
                <button onclick="{this.setMessage}">Click</button>
                <p>{this.state.message}</p>
            </div>
        )
    }
}

Mounting

constructor( ) is equivalent to the concept of constructors in object-oriented programming.
The initial value can be set, and this can be set and bound in this function.
render( ) is to render the component to the page. It renders the content to the page by passing back the JSX in the value.

Updating

setMessage( ) allows user to do a message update when clicking the button.
render( ) is triggered once when the data state is updated.

Lifecycle of Function Components

Functional components have a lifecycle through React's built-in Hook, which was only released by the Facebook team in 2018, so until 2018, we've mostly been using category components.

Below is the sample code for the function component, which is much simpler.

				
					import React, { useState } from &#039;react&#039; function Test() { const [message, setMessage] = useState(&#039;&#039;) return (
        <main>
            <button onclick="{()" > setMessage(&#039;Hello World!&#039;)}&gt; Click
            </button>
            <p>{message}</p>
        </main>
    )
}

Mounting

useState( ) is a function of the React hook that initializes a piece of data or a state.

Updating

setMessage( ) allows the user to update the message when clicked, and uses an arrow function in the onClick to do so.

This is just a simple code to show the life cycle of an object, but there are many more life cycle scenarios, which will be introduced in a later hook article.