React Lifecycle - React Vernacular Campaign 10

React10-React-Life-Cycle

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:

  1. Three Stages of the Life Cycle
  2. Lifecycle of a class of objects
  3. 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

React Lifecycle - hogantech
React Lifecycle

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

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

  1. Mounting
  2. Updating
  3. 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 'react' class Test extends Component { constructor(props) { super(props) this.state = { message: '' } this.setMessage = this.setMessage.bind(this) } setMessage() { this.setState({ message: 'Hello World!' }) } 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.

Conclusion

This article describes the life cycle of a component and describes the life cycle in terms of simple classes as well as functional components.

In the future, we will make a detailed introduction of hook for the mainstream function components.

Feel free to leave a comment if you have any suggestions or questions!

If you like this series of articles, please do not hesitate to click like and share it so that more people can see it!

React Vernacular Campaign Series

React Props - React Vernacular Campaign 09

Building a React Project - React Vernacular Campaign 08

Babel & Webpack & NPM - React Whitepaper Campaign 07

React JSX - React Vernacular Campaign 06

How React Works - React Vernacular Campaign 05

JavaScript Advanced Functions - React Vernacular Campaign 04

JavaScript Async Await - React Vernacular Campaign 03

JavaScript ES6 Object - React White Paper Campaign 02

JavaScript ES6 - React White Paper Campaign 01

Leave a Comment

Your email address will not be published. Required fields are marked *

en_USEnglish