in the previous article "React source code parsing (1): component implementation and mounting , we described the implementation and mounting of React components. Now let's explore the life cycle of components.
We already know that the lifecycle of the component will be triggered only after the mount process starts, and a js object of type ReactElement will be generated. By parsing the information contained in the component object, the corresponding HTML information is obtained, inserted into the specified DOM container, and the rendering of the view is finally completed. So how is the life cycle of the component triggered in this process?
in fact, the study of the declaration cycle of components is a more in-depth study of the mounting process of components.
Lifecycle of components
at the end of the previous article, we know that the ReactDOM.render () method internally generates four different types of wrapper components through the factory method, depending on the parameters passed in:
- ReactEmptyComponent
- ReactTextComponent
- ReactDOMComponent
- ReactCompositeComponent
when executing the mount process, the lifecycle is triggered by executing mountComponent methods within each encapsulated component, but it is clear that the lifecycle exists only in the React custom component, that is, ReactCompositeComponent . Because the other three components do not have a lifecycle, let's first analyze the relatively easy three internal components that do not exist lifecycle.
1.ReactEmptyComponent
is created by the ReactEmptyComponent.create () method, which finally calls the ReactDOMEmptyComponent method. Take a look at the source code:
because the component is empty, almost all parameters are set to null and have nothing to do with the life cycle, only the mounting and unloading of the component. In the key method mountComponent , we see that the final return is the HTML in the form of & LTTITITY, which is empty, that is, empty, so that the real DOM is also empty.
2.ReactTextComponent
created by ReactHostComponent.createInstanceForText () method, we can just look at mountComponent :
The processing of ReactDOMTextComponent is slightly more complicated than that of ReactDOMEmptyComponent , but the logic is roughly the same. The escapeTextContentForBrowser method performs space checking on the parameters, and finally converts the parameters to a string and returns them through a simple ''+ parameter method.
3.ReactDOMComponent
is created by ReactHostComponent.createInternalComponent () method. Similarly, let's just look at mountComponent directly:
because the dom element also has no life cycle, ReactDOMComponent will identify and process the passed div , span and other tags through switch . In addition, the process is basically the same as the above two types of components.
4.ReactCompositeComponent
The custom component is the focus of the React component. It is created by the ReactCompositeComponentWrapper () method, and finally the HTML of the component is created by calling the ReactCompositeComponentMixin.mountComponent method. As the function is very long, interested readers please go to ReactCompositeComponent.js to read the source code.
based on the above, you can see that the purpose of lifecycle execution is to parse ReactElement to get HTML. As a result, we update the summary table of the four component types in the previous article:
nextElement |
actual parameters | result |
|---|---|---|
null / false |
empty | create ReactDOMEmptyComponent component |
object & & type = = string |
Virtual DOM | create ReactDOMComponent component |
object & & type! = string |
React components | create ReactCompositeComponent component |
string |
string | create ReactDOMTextComponent component |
number |
numbers | create ReactDOMTextComponent component |