React source code parsing (2): Component types and lifecycle

In our last article, React Source Parsing (part 1): Component Implementation and Mounting, we explained how to implement and mount the React component. Now let’s explore the component lifecycle.

As we already know, only after the mounting process starts, the component life cycle will be triggered, and js objects of type ReactElement will be generated. By parsing the information carried in the component object, the corresponding HTML information will be obtained, which will be inserted into the specified DOM container, and finally the view rendering will be completed. So how is the component lifecycle triggered during this process?

In fact, studying the declaration cycle of a component is a more in-depth study of the mounting process of a component.

The lifecycle of the component

At the end of the last article, we learned that the reactdom.render () method internally generates four different types of encapsulated components through factory methods, depending on the parameters passed in:

• ReactEmptyComponent
• ReactTextComponent
• ReactDOMComponent
• ReactCompositeComponent

When the mounting process is executed, the lifecycle is triggered by executing the mountComponent method inside each encapsulated component, but obviously the lifecycle exists only in the React custom component, the ReactCompositeComponent. Since the other three components do not have a lifecycle, let’s first look at three internal components that are relatively easy to do without a lifecycle.

1.ReactEmptyComponent

Through ReactEmptyComponent. The create () method creates, finally the method is invoked ReactDOMEmptyComponent method, look at the source code:

Since the component is empty, almost all parameters are set to null, and there is no life cycle, only mounting and unmounting of the component. In the key mountComponent method, we see that the final return is something like
HTML, which is empty, so the real DOM insert is also empty.

2.ReactTextComponent

Through ReactHostComponent. CreateInstanceForText () method to create, we see mountComponent can directly:

ReactDOMTextComponent is a little more complicated to handle than ReactDOMEmptyComponent, but the logic is roughly the same. EscapeTextContentForBrowser within a method of parameter space check processing, finally through a simple ‘+ parameters method parameters can be converted to a string and returns.

3.ReactDOMComponent

Through ReactHostComponent. CreateInternalComponent () method to create, we also see mountComponent directly by:

Since DOM elements also have no life cycle, ReactDOMComponent will recognize and process incoming div,span and other tags through the switch. Otherwise, the process is the same as the previous two types of components.

4.ReactCompositeComponent

Custom components is the focus of the React components, through ReactCompositeComponentWrapper () method to create, eventually call ReactCompositeComponentMixin. MountComponent method to create components HTML. Because the function is very long, interested readers. Please go to ReactCompositeComponent js to read the source code, we directly use the legend gives the function logic:

Based on the above, you can see that the purpose of the execution of the life cycle is to parse the ReactElement to get the HTML. From this we update the summary table of the four component types from the previous article:

Finally, based on the mind map given at the end of the first article, we improve the details: (Click to view the larger picture)

Review: “React source code analysis (1): Component implementation and mount” “React source code analysis (3): Detailed transaction and update queue” “React source code Analysis (4): Event system” contact email: [email protected]