A brief introduction to component life cycle in React Native

This article mainly introduces the life cycle of components in React Native. It is of great practical value. Friends who need it can refer to the following

Overview

Like View in Android development, components in React Native (RN) also have a lifecycle. The so-called life cycle is the state an object goes through from its initial creation to its final demise. Understanding the life cycle is the key to rational development. The life cycle of RN components is organized as follows:

As shown in the figure, the component life cycle can be roughly divided into three stages:

• The first stage: is the first drawing stage of the component, as shown in the upper dotted box in the figure, where the loading and initialization of the component are completed;

• The second stage: is the component In the running and interaction stage, as shown in the dotted box in the lower left corner of the figure, the component can handle user interaction at this stage, or receive events to update the interface;

• The third stage: is the stage where the component is uninstalled and dies. , in the dotted box in the lower right corner of the picture, some component cleaning work is done here.

Life cycle callback function

The following is a detailed introduction to each callback function in the life cycle.

getDefaultProps

Before the component is created, getDefaultProps() will be called first. This is a global call. Strictly speaking, this is not part of the component's life cycle. When a component is created and loaded, getInitialState() is first called to initialize the component's state.

componentWillMount

Then, when preparing to load the component, componentWillMount() will be called. Its prototype is as follows:

void componentWillMount()

The timing of this function call is After the component is created and the state is initialized, before render() is drawn for the first time. You can do some business initialization operations here, and you can also set component status. This function is called only once during the entire life cycle.

componentDidMount

After the component is drawn for the first time, componentDidMount() will be called to notify that the component has been loaded. The function prototype is as follows:

void componentDidMount()

When this function is called, its virtual DOM has been constructed, and you can start to obtain the elements or subcomponents in this function. It should be noted that the RN framework first calls componentDidMount() of the child component, and then calls the function of the parent component. Starting from this function, you can interact with other JS frameworks, such as setting the timing setTimeout or setInterval, or initiating network requests. This function is also called only once. After this function, it enters a stable running state and waits for the event to be triggered.

componentWillReceiveProps

If the component receives new properties (props), componentWillReceiveProps() will be called, and its prototype is as follows:

##

void componentWillReceiveProps( 
 object nextProps
)

componentWillReceiveProps: function(nextProps) { 
 this.setState({
  likesIncreasing: nextProps.likeCount > this.props.likeCount
 });
}

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)

void componentWillUpdate( 
 object nextProps, object nextState
)

void componentDidUpdate( 
 object prevProps, object prevState
)

当组件要被从界面上移除的时候，就会调用 componentWillUnmount()，其函数原型如下：

void componentWillUnmount()

在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

总结

到这里，RN 的组件的完整的生命都介绍完了，在回头来看一下前面的图，就比较清晰了，把生命周期的回调函数总结成如下表格：

The above is the detailed content of A brief introduction to component life cycle in React Native. For more information, please follow other related articles on the PHP Chinese website!