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
)

The input parameter nextProps is the property that will be set. The old properties can still be obtained through this.props. In this callback function, you can update your component state by calling this.setState() according to the change of the property. It is safe to call the update state here and will not trigger additional render() calls. As follows:

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

shouldComponentUpdate

When the component receives new properties and state changes, it will trigger the call shouldComponentUpdate(...). The function prototype is as follows ：

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)

Input parameter nextProps is the same as the componentWillReceiveProps function above, nextState represents the state value of the component that is about to be updated. The return value of this function determines whether the component needs to be updated. If true, it means that an update is required, and the subsequent update process continues. Otherwise, it will not update and enter the waiting state directly.

By default, this function always returns true to ensure that the UI can be updated synchronously when the data changes. In large projects, you can overload this function yourself and determine whether the UI needs to be updated by checking the attributes and status before and after the change, which can effectively improve application performance.

componentWillUpdate

If the component status or properties change, and the above shouldComponentUpdate(...) returns true, the component will start to be updated and componentWillUpdate() will be called. Its function prototype is as follows ：

void componentWillUpdate( 
 object nextProps, object nextState
)

The input parameters are the same as shouldComponentUpdate. In this callback, you can do some things before updating the interface. It is important to note that within this function, you cannot use this.setState to modify the state. After this function is called, nextProps and nextState will be set to this.props and this.state respectively. Immediately following this function, render() will be called to update the interface.

componentDidUpdate

After calling render() to update the interface, componentDidUpdate() will be called to be notified. The function prototype is as follows:

void componentDidUpdate( 
 object prevProps, object prevState
)

Because the properties and status have been updated here, the input parameters of this function become prevProps and prevState.

componentWillUnmount

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

void componentWillUnmount()

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

总结

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

生命周期	调用次数	能否使用 setSate()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

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!