"React Native and Combat" book serial "react Native Life cycle"

This article is my published book "React Native and actual combat" serial sharing, the book by the mechanical Industry publishing house, the book detailed React Native framework underlying principles, React Native component layout, components and API Introduction and code combat, and React Nati ve and IOS, Android platform of the mixed development of the underlying principles and code demonstration, a selection of a large number of instance code, convenient for readers to learn quickly.

Books also supporting the video tutorial "80 Practical Lessons proficient React Native development", this video course is recommended to cooperate with the book study, the Book of the Central Plains rational explanation of the relatively clear, and video tutorials for components, APIs and other parts of the code of the actual development of the explanation is more intuitive.

For all books related information, please visit: http://rn.parryqiu.com

3.5 Life Cycle Concepts

Any living body undergoes a process from birth to extinction, and the components in the React Native framework also have such attributes.
At each stage of the component life cycle, React Native provides multiple life cycle functions for developers to use as hooks for the life cycle of the component, so that the corresponding logic can be processed at the corresponding point-in-time program to achieve the corresponding functions.
When the React Native program starts, the internal virtual DOM begins to build, and the lifecycle is built throughout the virtual Dom's lifecycle, from the initialization of the virtual DOM to the unloading of the virtual DOM, React Native different life cycles for the different states of the component.

3.6 The life cycle in React Native

In Figure 3-4, you can see that in several large phases of the React Native virtual DOM, there are corresponding life-cycle functions.

Figure 3-4 React Native life cycle

1. Initialization phase

This stage makes the default props and state settings for the component, which can be assigned by the following code.

1. static defaultProps = {  2. autoPlay: false,  3. maxLoop: 10,  4. };  

2. Loading phase

This stage is the stage at which the component begins to instantiate, such as when the component starts being called by another component. Consists of the following three life cycle functions.

• Componentwillmount: The component is going to start loading and you need to add some business logic before the component starts to load, so you can add it in this function.

• Render: The component begins to generate the DOM of the page based on props and state, and returns this Dom at the end. In this function it is not possible to modify the values of props and state, only read, and the returned DOM can only have one top-level element, for example, only one div wraps all elements to return.

• Componentdidmount: The component has finished loading and executes the function immediately after the render function. In general, network requests can be made here, because the component UI renders well before making network requests, and generally does not cause UI confusion. When the value of state is modified in this life cycle function, the UI is re-rendered immediately, so it is a good time to update the UI by loading the network data.

  3. Update phase This stage is typically experienced when a component is re-rendered because of a change in props or state because of a user action or a parent component update. In a few important moments of updating the rendering, React Native provides the following life cycle functions for developers to perform the corresponding logical operations.

• Componentwillreceiveprops: When a new props value update is received, it executes to this life cycle function, at which point the received props value can be assigned to state.

• Shouldcomponentupdate: In this life cycle, it is possible to logically determine that changes to the new props and state need not cause UI updates to the component, which will cause updates by default, but React Native This life cycle is provided for developers to decide whether they need to be updated at their own discretion. If this function returns TRUE, the component is updated and if False is returned, the component is not updated. This lifecycle is important when optimizing App performance, because there are many unnecessary component UI updates that can be intercepted by this life cycle function.

• Componentwillupdate: If the life cycle function above Shouldcomponentupdate returns TRUE, then this life cycle function will continue, indicating that the component is about to be updated. There is also a time for the relevant logic to be processed before the update operation. But logically you should also understand that it is not possible to modify the value of the state here, but to do some other preparatory work before the update.

• Componentdidupdate: The life cycle function that is executed after the component has been updated. This function has two parameters prevprops and prevstate, respectively, props and state before the update. Here you can compare some of the old and new values, and if the value changes, you can make some network requests, load the data, and so on.

  4. Uninstall phase

• Componentwillunmount: This life cycle function is executed before the component is unloaded and unregistered, where it can perform some of the so-called cleanup tasks, such as shutting down the network request, emptying the unnecessary storage, purging of the loop-executed timer, and so on.

At this point, React Native completes the complete life cycle of a component, and you can realize React Native the execution of each life cycle through the following code. It is only necessary to add your own business logic to the corresponding life cycle function according to the actual project requirements.

1./** 2. * Chapters: 03-06 3. * Life cycle in React Native 4. * FilePath:/03-06/lifecycle.js 5. * @Parry 6. */7.  8. Import React, {Component} from ' React ';  9. Import {Appregistry,view,text} from ' react-native '; 10.11. Export default class LifeCycle extends Component {12.  Constructor (props) {(props);  This.state = {. Name: "React" 17.} 18.} 19. 20.//component is about to load 21.  Componentwillmount () {Console.log ("Componentwillmount"); 23.} 24. 25.//Start Component rendering 26.  Render () {Console.log ("render"); Return (<View>. <Text> 31. {This.state.name} 32. </Text> 33. </View> 34.  ); 35.} 36. 37.//After the component is loaded 38.  Componentdidmount () {Console.log ("Componentdidmount"); 40.} 41. 42.//The component receives the new props 43.  Componentwillreceiveprops (nextprops) {console.log ("componentwillreceiveprops"); 45.} 46. 47.//Logical control whether the component 48 needs to be updated.  Shouldcomponentupdate (Nextprops, nextstate) {console.log ("shouldcomponentupdate"); 50.} 51. 52.//component is about to be updated and re-rendered 53.  Componentwillupdate (Nextprops, nextstate) {console.log ("componentwillupdate"); 55.} 56. 57.//Components re-rendered after 58.  Componentdidupdate (Prevprops, prevstate) {console.log ("componentdidupdate"); 60.} 61. 62.//Component Uninstall before logout 63.  Componentwillunmount () {Console.log ("Componentwillunmount"); 65.} 66. } 67.   Appregistry.registercomponent (' LifeCycle ', () = + Main);

3.7 Summary of this chapter

This chapter, like the necessary internal skills in the cultivation of martial arts, seems to have little to do with the use of the React Native framework, and some of the underlying principles are somewhat obscure to understand. However, if you want to be a developer who is proficient in the React Native framework, and not just a user, this part of the content is very important, and in the later time you encounter the problem of this framework, you can quickly based on this part of the underlying knowledge quickly to locate the problem. The same is true of other software development language learning principles, hoping to inspire you all.