React Native component life cycle

Overview

The so-called life cycle, which is the state that an object undergoes from its inception to the last extinction, understands the life cycle of the space and is a knowledge point that must be mastered in the development. Just like components in Android development, React native's components also have a lifecycle (Lifecycle).
The life cycle of the React native component can be broadly divided into the instantiation phase, the existence phase, and the destruction phase. We can only develop high-performance apps based on the understanding of the component life cycle.
The life cycle of components in React native can be broadly expressed as:

• The first stage: the first drawing phase of the component, in the above dashed box, where the component loading and initialization is completed;
• Second stage: Is the component in the run and interaction phase, the lower left corner of the box, this stage component can handle user interaction, or receive the event update interface;
• The third stage: is the component unload the extinction stage, in the bottom right corner of the dotted box, here do some cleanup work of the components.

Analysis of the instantiation phase of life cycle analysis

Getdefaultprops
The function is used to initialize some default properties, and usually the fixed content is initialized and assigned in this function;
Before a component is created, it is called getdefaultprops () to initialize some properties, and the component itself cannot modify props itself because it does not call Getdefaultprops () after the component is initialized.
getinitialstate
This function is used to initialize some states of a component;
This function is different from getdefaultprops and can be called again in a later procedure.
Like what:

this.setState({    activePage: activePage,     currentX: contentOffSetX  });

Note: Once the This.setstate method is called, the component must call the Render method to render the component again, but if the react framework automatically determines whether a real rendering is required based on the state of the DOM.
Componentwillmount
The function call time is after the component is created and initialized, before the render () is first drawn. This function is called only once throughout the life cycle.
Render is a required method in a component, essentially a function, and returns JSX or other components to form the DOM, similar to the Android XML layout. The function is to inform the system to prepare to load the component.
Componentdidmount
The method is called after the Render method has been invoked to notify that the component has finished loading. Usually in this function to handle the operation of loading data such as network requests;

Analysis of the existence period phase

Componentwillreceiveprops
If the component receives a new attribute (props), it calls Componentwillreceiveprops () to modify the component's props or state.
The old property can still be obtained through this.props, by calling This.setstate () to update your component state, where it is safe to call the update state and does not trigger an additional render () call.
shouldcomponentupdate
When a component receives a new attribute and state change, it triggers the call to Shouldcomponentupdate (...) to control whether the rendering of the interface is performed by returning false or true. If TRUE indicates that an update is required, continue to follow the update process. No, it does not update and goes directly to the wait state.

componentwillupdate
If the component state or property changes, and the above Shouldcomponentupdate () returns True, the quasi-update component is started and called Componentwillupdate (), which is called before the component refreshes. Somewhat similar to Componentwillmount ().
componentdidupdate
After the render () Update completion interface is called, Componentdidupdate () is called to be notified, and its function is prototyped as follows:

void componentDidUpdate(    objectobject prevState)

Phase analysis of the destruction period

Componentwillunmount
When the component is to be removed from the interface, it calls Componentwillunmount (), which can do some cleanup work related to components, such as canceling timers, network requests, and so on.

Summarize

Life cycle	number of calls	can I use Setsate ()
Getdefaultprops	Global Call 1 times	No
getinitialstate	1	No
Componentwillmount	1	is a
Render	>=1	No
Componentdidmount	1	is a
Componentwillreceiveprops	>=0	is a
shouldcomponentupdate	>=0	No
componentwillupdate	>=0	is a
componentdidupdate	>=0	is a
Componentwillunmount	1	is a

Add what is Dom diff algorithm

The web interface is made up of a DOM tree, and when one of these parts changes, it is actually a corresponding DOM node that has changed. In react, the idea of building a UI interface is determined by the current state of the interface. Before and after two states corresponding to two sets of interfaces, and then by react to compare two interface differences, ' This requires the DOM tree for the diff algorithm analysis.
That is, given any two trees, find the fewest conversion steps. But the standard diff algorithm complexity requires O (n^3), which clearly does not meet performance requirements. To achieve the purpose of the interface can be refreshed at every interface, it is necessary to optimize the algorithm. This looks very difficult, but Facebook engineers did it, and they made two simple assumptions about the features of the Web interface, which reduced the complexity of the diff algorithm directly to the two identical components of O (n) to produce a similar DOM structure, with different components producing different DOM structures ; For a group of child nodes of the same hierarchy, they can be distinguished by a unique ID.

React Native component life cycle