React-native Lifecycle

I. Preface

Q:

What is the life cycle of a component?

What methods are included in the life cycle of a component?

When are all lifecycle methods called?

 

Life cycle: As the name implies, the entire process of a subject from birth to death

To learn a component (the cornerstone and core of react), you must first understand its entire life process to master how to use the component. Otherwise, blind use is just a matter of luck.

 

Ii. Text (1) and split-up cycle (divided into three modules)

Mounting, updating, and unmounting)

 

(2) restealing Images

(3) Explain the lifecycle Method

1. Before components are loaded:

Method: getdefaproprops ()

Purpose: set the default attribute (props) for the component. es6 uses defaproprops to set the default attribute.

Static defaultprops = {Name: 'xiaoming ', age: 22, sex: 'male'} // import proptypes from 'prop-types' specifies the property type Static proptypes = {Name: proptypes. string. isrequired, // isrequired indicates that this attribute must be passed in age: proptypes. number, sex: proptypes. string}

2. component loading stage:

Method:Getinitialstate() Component Construction Method

Purpose: Initialize the component state. es6 uses Constructor () to initialize the component. You can obtain this. props...

Constructor (props) {super (props); // as long as the component has a constructor, it is necessary to write super. Otherwise, this indicates that this. State = {visible: false,} is incorrect ,}}

 

Method:Componentwillmount()

Purpose: call a component before it is loaded. If it is not called for later component updates, the state can be modified once throughout the lifecycle.

 

Method:Render()

Role: the most important step of react is to create a virtual Dom, perform the diff algorithm, and update the DOM tree here. In this case, the State cannot be changed.

Concept:

Virtual dom (Virtual DOM): a component is not a real Dom node, but a Data Structure in the memory (this can be called a virtual node). Only after it inserts a real document, becomes the real dom

Diff algorithm: the design of react is that all Dom changes will first occur on the virtual Dom, and thenActual Dom changesReflected on the real Dom node. (The actual Dom change is completed through the diff algorithm)

 

Method:Componentdidmount()

Function: called after the component is loaded. It is called only once.

 

3. Update phase of the component (this phase will be continuously circulating based on changes in props and state)

Method:Componentwillreceiveprops (nextprops)

Purpose: The component is not called when it is initialized. The component is called when it accepts a new props.

This method is used to listen for Component Attribute changes. You can solve the problem that props changes components but does not re-render them.

componentWillReceiveProps(nextProps){    this.setState({visible: nextProps.visible})}

 

Method:Shouldcomponentupdate (nextprops, nextstate)

Role: it is an important part of react performance optimization.

When the component accepts a new State or props, we can set whether the two props and State are the same before and after this comparison,

If they are the same, false is returned to prevent updates, because the same DOM tree will be generated for the same attribute status, so that the new DOM tree and the old DOM tree do not need to be created for diff algorithm comparison, saves a lot of performance, especially when the DOM structure is complex.

 

Method:Componentwillupdate (nextprops, nextstate)

Purpose: do not call the component during initialization. It is called only when the component is about to be updated. In this case, you can modify the state.

 

Method:Render ()

Purpose: update the props or state of the component and re-render the component.

 

Method:Componentdidupdate ()

Purpose: do not call the component during initialization. After the component is updated, the DOM node can be obtained.

 

4. Component uninstall stage

Method:Componentwillunmount ()

Function: called when the component is to be detached. Some Event Listeners and timers need to be cleared at this time.

 

 

Iii. Conclusion

Come on!

 

 

React-native Lifecycle