What is the life cycle of React Native components?

This time I will bring you the life cycle of React Native components. What are the notes of the life cycle of React Native components? The following is a practical case. Let’s take a look. .

Here is an introduction to the life cycle of React Native components for everyone. I believe this will be of great help to everyone when using React Native components. If you are interested, let’s take a look.

Just like View in Android development, components in React Native (RN) also have a life cycle. 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’s The running and interaction stage, as shown in the dotted box in the lower left corner of the figure, the component in this stage can handle user interaction, or receive events to update the interface;

• The third stage: Yes In the stage of component uninstallation and death, as shown in the dotted box in the lower right corner of the figure, some component cleaning work is done here.

Life cycleCallback function

Next, we will introduce each callback function in the life cycle in detail.

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, to prepare to load the component, componentWillMount() will be called, and its prototype is as follows:

void componentWillMount()

This function is called after the component is created and the state is initialized, but 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, and the old properties can still be obtained through this.props. In this callback function, you can update your component state by calling this.setState() based on changes in properties. Calling the update state here is safe and will not trigger additional render() transfer. As follows:

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

shouldComponentUpdate

When a component receives new properties and changes in state, it will trigger a call to shouldComponentUpdate(...). The function prototype is as follows:

boolean shouldComponentUpdate( 
 object nextProps, object nextState
)

The input parameter nextProps is the same as the componentWillReceiveProps function above. nextState represents the state value that the component is about to update. The return value of this function determines whether the component needs to be updated. If true indicates that an update is required, continue with the subsequent update process. 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

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true，就会开始准更新组件，并调用 componentWillUpdate()，其函数原型如下：

void componentWillUpdate( 
 object nextProps, object nextState
)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：

void componentDidUpdate( 
 object prevProps, object prevState
)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState。

componentWillUnmount

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

void componentWillUnmount()

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

总结

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

The above is the detailed content of What is the life cycle of React Native components?. For more information, please follow other related articles on the PHP Chinese website!