react组件生命周期理解

前端之家收集整理的这篇文章主要介绍了react组件生命周期理解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react组件有两个状态,一个是渲染状态,一个是卸载状态,而渲染状态又分为初始渲染状态(也可以说是创建状态)和重新渲染状态(也可以说是存在状态,说明组件一直存在,会发生多次重新渲染)。这三个状态下又会产生一系列的生命周期函数,开发人员一般只需要了解其中五个主要的生命周期函数:componentWillMount、componentDidMount、componentWillUpdate、componentDidUpdate、componentWillUnmount。一下是图解:

下面详细解释一下上图。首先,在组件初始渲染之前react native框架会调用componentWillMount函数,在组件生命周期中,它只会被执行一次(注:如果组件需要从本地存储中获取数据,可以在该函数中执行获取本地存储数据操作);执行完componentWillMount函数之后,组件就会执行初始渲染;当初始渲染完成后,react native框架会立即调用componentDidMount函数,同样的,该函数在生命周期中也只会执行一次(注:组件可以在该函数中执行从网络中获取数据操作);这两步之后,组件就初始渲染出来了;当组件从父组件中接收到新的prop、组件的prop在父组件中被更改、或者组件的state变量改变时,只要这三个有发生一种,react native框架就会触发diff算法计算该组件是否有改动,如果有改动,组件就会被重新渲染,重新渲染之前,react native框架会调用componentWillUpdate函数(注:该函数中不能对组件状态进行更改);之后,组件便会执行重新渲染;重新渲染完成之后,react native框架会调用componentDidUpdate函数;重新渲染这个状态会被多次触发,所以这两个函数也会被执行多次。当组件要被卸载之前,react native框架会调用componentWillUnMount函数,之后就会卸载组件。
开发者可以在这几个生命周期函数中定义一些你想组件变化的操作或者做一些数据的改变。

最后提醒一点,diff算法是react native用于实现虚拟dom机制实现的一种算法,虚拟dom机制是react native实现对数据批量处理反应迅速的基础,建议朋友们有必要去理解透彻。之后的文章中,本人也会进行介绍,大家共勉交流一下,嘻嘻~

原文链接:https://www.f2er.com/react/303178.html

猜你在找的React相关文章