react组件生命周期理解

本文详细解析了React组件的生命周期,包括初始渲染、重新渲染及卸载三个阶段,并重点介绍了componentWillMount、componentDidMount等五个关键生命周期函数的作用及应用场景。

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

clipboard.png

下面详细解释一下上图。首先,在组件初始渲染之前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实现对数据批量处理反应迅速的基础,建议朋友们有必要去理解透彻。之后的文章中,本人也会进行介绍,大家共勉交流一下,嘻嘻~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值