preface

Based on the basic principles of React, this paper discusses how to live the life cycle of React 15 and React 16. Understand the story behind the component lifecycle change by comparing and summarizing the “Why” from one “Why” to another.

Design ideas behind the life cycle

“Virtual DOM” and “components” are two key concepts in React’s fundamentals. This is where we start to learn.

Workflow for the virtual DOM

When a component is initialized, it generates the virtual DOM by calling the render method in the lifecycle, and then converts the virtual DOM to the real DOM by calling the reactdom.render method.

When the component is updated, it will generate a new virtual DOM by calling the render method again, and then locate the difference between the two virtual DOM with the help of diff algorithm, so as to make directional update for the changed real DOM.

This is the React framework core algorithm in general flow. For this critical set of workflows, the “virtual DOM” is the premise of all operations and the cornerstone of the core algorithm.

Componentization

Componentization is an excellent software design idea and an important skill to improve the efficiency of research and development.

In a React project, we pulled out various components based on business logic, each component being both “closed” and “open.”

By “closed,” we mean that within the component’s own rendering workflow, each component handles only its internal rendering logic. Components can “go it alone” without data flow interaction.

By “open,” I mean communication between components. The communication between components is completed based on the principle of “unidirectional data flow”. The communication between components will change the data within the communication party, which will affect the rendering result.

The nature of the lifecycle approach

The render method within the component is the most important in the whole component life cycle. The process from the change of component data to the actual update of the component occurs, which can not be realized without Render. Render functions must not be omitted, and lifecycle methods outside render can only directly or indirectly affect component rendering and updating.

If the Render method is likened to the “soul” of the component, the lifecycle methods outside render can be understood as the “torso” of the component. The trunk and soul, together, make up the React component’s entire life cycle.

Origin, disassembling the React lifecycle from React 15

In React 15, you need to pay attention to the following lifecycle methods:

constructor()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillMount()

componentWillUpdate()

componentDidUpdate()

componentDidMount()

render()

componentWillUnmount()
Copy the code

If you’re old enough to React, you might remember that there are also getDefaultProps and getInitState methods that initialize data in React. CreateClass () mode. Since this writing is not common after THE popularity of ES6, I will not elaborate on it here.

The above lifecycle approach is a series and interdependent relationship, as shown in the figure below:

Mounting stage

The mount process occurs only once in the lifetime of the component, during which the component is initialized and then rendered into the real DOM for what is called the “first render.”

During the mount phase, a React component goes through the life cycle in sequence as shown below:

First, let’s see that Constructor, componentWillMount, and componentDidMount are called only once at mount time. We can initialize this.state in our constructor method:

Constructor (props) {console.log(" enter constructor"); super(props); This. state = {text: "the text of the child component"}; }Copy the code

And componentWillMount will be triggered before the execution of the Render method, some students used to do some initialization operations in the method, but these operations are often accompanied by some risks or unnecessary. This is not advisable.

Next the render method is triggered. Note that the render method does not operate on the real DOM during execution. Its function is to return the content that needs to be rendered. The real DOM is rendered by ReactDOM. Render during the mount phase.

The componentDidMount method is fired after rendering. At this point, the real DOM is mounted on the page, and we can perform real DOM-related operations and operations such as asynchronous requests and data initialization during this lifecycle.

This is the entire lifecycle of component initialization rendering.

Updating stage

There are two types of component updates:

  • Updates made by the parent component;
  • Updates triggered by setState calls from the component itself;

Here are two renewal lifecycle processes:

What is the trigger for componentWillReceiProps?

ComponentWillReceiveProps is one of the React life cycle function, in the original props will not be called, it will call when the component receive the new props. Typically used to rerender a child component when the parent component updates its state. It is called as follows:

componentWillReceiveProps(nextProps)
Copy the code

ComponentWillReceiveProps lifecycle function of the trigger condition is triggered by the parent component updates, pay attention to is not triggered by the change of the props. To review this sentence from the React official documentation:

Updates triggered by the component’s own setState

ShouldComponentUpdate ==> componentWillUpdate ==> Render ==> componentDidUpdate

The componentWillUpdate is triggered before Render, allowing some preparatory work to be done inside the function that does not involve real DOM manipulation;

ComponentDidUpdate is triggered when the component is updated. Similar to componentDidMount, this lifecycle is often used for DOM operations.

In addition, we also often componentDidUpdate execution, as a child component update completed flag notification to the parent component.

ShouldComponentUpdate rerender

ShouldComponentUpdate (componentUpdate);

shouldComponentUpdate(nextProps, nextState)
Copy the code

Due to improper operations, cause frequent calls to render, resulting in unnecessary rendering performance overhead, for this React design shouldComponentUpdate method is to solve the performance cost caused by frequent render.

The React component decides whether or not to re-render the component based on the return value of the shouldComponentUpdate method.

ShouldComponentUpdate defaults to true, which means “unconditional rerender”.

In actual development, we often manually populate the decision logic in shouldComponentUpdate, or directly introduce best practices such as PureComponent into the project to achieve “conditional rerender”.

Unmounting phase

The destruction phase of a component involves only one lifecycle, as shown in the figure below:

Common reasons for component destruction:

  • Component removed from parent component;
  • If the parent component detects that the key value of the component is not the same as the last time it was set, the component will be killed.

conclusion

Starting from the basic design ideas of React, this paper systematically studied and summarized the life cycle of React 15 by understanding the two key concepts of virtual DOM and componentization. If history is the mirror, we can know the rise and fall. Only understanding the React lifecycle in the “past” state. In order to have a deeper understanding of the changes.

The component lifecycle has changed in React 16, and the next article will explain the thinking behind these changes.

reference

  • Learn how to React