ReactNative Advanced (16) : The React-Native component lifecycle

The component life cycle is typically divided into four phases: create, instantiate, run (update), and destroy. Each stage is described below.

This phase occurs mainly when the component class is instantiated, which is when the component class is invoked. This phase triggers a series of processes in the following order of execution:

• constructorConstructor, which initializes some state of the component.
• componentWillMount: Ready to load the component, you can do some business initialization here, or set the component state.
• render: required to generate the pageDOMStructure, and returns the structure.
• componentDidMount: executes after the component has been successfully loaded and rendered. Generally, network requests and other data loading operations are placed here to ensure that they do not occurUIError on.

This phase is triggered primarily when a component dies.

• componentWillUnmount: called when a component is about to be removed from the interface. You can do some related cleanup in this function, such as canceling timers, network requests, and so on.

(1) Function prototype

constructor(props)
Copy the code

It is a component constructor. Its first statement must be super(props). The constructor is called first and only once before the component is loaded.

This is where the state machine variables are defined.

Then, ready to load the component, calls componentWillMount() with the following prototype:

void componentWillMount(a) 
Copy the code

This function is called after the component is created and the state is initialized, but before the first render() is drawn.

(2) Basic introduction

• This function is executed only once during the life of the component.
• This function takes no arguments and does not require any return value.
• It is used in the initial rendering (renderFunction isReact NativeThe framework call is executed, and when it is finished,renderThe function will be immediately destroyedReact NativeThe framework call executes. Note: if called in this functionsetstateThe function changes the value of some state machine variables,React NativeInstead of performing a render operation, the framework waits for the function to complete before performing an initial render.
• If the child component also hascomponentWillMountFunction, which will be in the parent componentcomponentWillMountThe function is then called.

If we need to read data from local storage for display purposes, this is a good time to do so. You can do some business initialization here, and you can also set the component state.

After the component is first drawn, componentDidMount() is called to inform you that the component has been loaded. The function prototype is as follows:

void componentDidMount(a)  
Copy the code

When this function is called, the virtual DOM has been built and you can start retrieving elements or subcomponents from the function. Note that the RN framework calls the child’s componentDidMount() and then the parent’s function. From this function, you can interact with other JS frameworks, such as setting timing setTimeout or setInterval, or making network requests. This function is also called only once. After this function, it enters a stable state, waiting for the event to fire.

(2) Basic introduction

• This function is executed only once during the life of the component.
• This function takes no arguments and does not require any return value.
• It is called immediately after the initial render execution is complete. After this point in a component’s life cycle, developers can access and manipulate any child component through its references.
• If the child component also hascomponentDidMountFunction, which will be in the parent componentcomponentDidMountFunction is called before.

If a React Native application needs to fetch data from the network after the application starts up and displays the initial interface, it’s a good idea to put the code to fetch data from the network in this function.

The call shouldComponentUpdate(…) is triggered when the component receives a new property and a state change. , the function prototype is as follows:

boolean shouldComponentUpdate( object nextProps, object nextState )
Copy the code

NextProps input parameters and the above componentWillReceiveProps function, nextState presentation components will update the status value. The return value of this function determines whether the component needs to be updated, and if true means it needs to be updated, the update process continues. If no, the system does not update the data and enters the waiting state directly.

By default, this function always returns true to ensure that the UI updates synchronously when data changes. In large projects, you can override this function yourself to determine whether the UI needs to be updated by checking the properties and state before and after the change, effectively improving application performance.

(2) Basic introduction

• After the initial rendering of the component completes, when the component receives a new onestateorpropsThis function will be called when.
• The function accepts twoobjectParameter, the first of which is newpropsThe second one is newstate.
• The function needs to return a Boolean value that tellsReact NativeWhether the framework needs to re-render this component for this change. The default returntrue. If this function returnsfalse.React NativeThis component will not be re-rendered and, accordingly, the component’scomponentWillUpdate 和componentDidUpdateThe function will not be called.

This function is often used to prevent unnecessary re-rendering and improve React Native application performance. For example, we can compare the old and new versions of state and props to see if we need to re-render. Here is a simple usage example:

shouldComponentUpdate(nextProps, nextState) {
  if(this.state.inputedNum.length < 3) return false;
  return true;
}
Copy the code

After calling render() to update the finished interface, componentDidUpdate() is called to be notified, with the following function prototype:

void componentDidUpdate( object prevProps, object prevState )
Copy the code

At this point, the properties and state are updated, and the input arguments to this function become prevProps and prevState.

Basic introduction

• After the initial rendering of the component is executed,React NativeThe framework calls this function when it has finished rerendering the component.
• This function does not need to return values; it accepts twoobjectParameter, the first of which is pre-renderpropsThe second one is before renderingstate.

The following is a simple text display component to demonstrate the operation flow of each link of the component. It also lists all the methods that are triggered throughout the life cycle of the component.

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  TextInput,
  View,
  Text,
  Clipboard
} from 'react-native';
 
export default class Main extends Component {
 
  // constructor
  constructor(props) {
    super(props);
    console.log("constructor");
    // Initializes the state value
    this.state = {message: "Welcome to hangge.com"}}// Ready to load the component
  componentWillMount() {
    console.log("componentWillMount");
  }
 
  // Render the interface
  render() {
    console.log("render");
    return (
      <View style={styles.container}>
        <Text style={styles.info}>
          {this.state.message}
        </Text>
      </View>
    );
  }
 
  // The component is loaded successfully and rendered
  componentDidMount() {
    console.log("componentDidMount");
  }
 
  Emitted when the component receives new props
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps");
  }
 
  // Determine whether the component needs to be updated
  shouldComponentUpdate(nextProps, nextState) {
    console.log("shouldComponentUpdate");
  }
 
  // is called before the component is re-rendered
  componentWillUpdate(nextProps, nextState) {
    console.log("componentWillUpdate");
  }
 
  // will be called after the component is re-rendered
  componentDidUpdate(prevProps, prevState) {
    console.log("componentDidUpdate");
  }
 
  // is called before the component is uninstalled
  componentWillUnmount() {
    console.log("componentWillUnmount"); }}const styles = StyleSheet.create({
  container:{
     flex:1,
     marginTop:40,
     alignItems:'center',
  },
  info:{
    fontSize:20,}}); AppRegistry.registerComponent('HelloWorld', () => Main);
Copy the code

The console output is as follows (because the sample does not update the state and does not destroy the component. So there are no later two stages) :