博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react组件生命周期理解
阅读量:6173 次
发布时间:2019-06-21

本文共 1002 字,大约阅读时间需要 3 分钟。

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实现对数据批量处理反应迅速的基础,建议朋友们有必要去理解透彻。之后的文章中,本人也会进行介绍,大家共勉交流一下,嘻嘻~

转载地址:http://zrtba.baihongyu.com/

你可能感兴趣的文章
mysql Load Data InFile 的用法
查看>>
Go new vs make
查看>>
【云宏大讲坛】超融合,融合的不仅是基础架构
查看>>
pytnon入门的一些小实例
查看>>
ubuntu下的dock工具
查看>>
饿了么被上海市市场监督局予以警告处分
查看>>
Java项目读取配置文件时,找不到指定的文件???
查看>>
lua/luajit and tcc
查看>>
前端安全即JS代码安全,前端源码安全探讨!
查看>>
如何快速实现异地不同网络打印机共享
查看>>
openinstall免费服务对App推广有哪些作用?
查看>>
基于Docker的微服务CI CD流水线
查看>>
学好SEO需要掌握哪些知识要点?
查看>>
JetBrains GoLand macv2019.1.2中文版如何换成无牵引模式?
查看>>
电气火灾监控系统工作原理
查看>>
中使馆驳斥《金融时报》“中国网络威胁论”
查看>>
【挨踢人物传】茶乡浪子:“传奇”职场路,一生感谢情(第12期)
查看>>
我的友情链接
查看>>
c#关于数据库连接操作的案例
查看>>
聊聊最近接触的媒体查询!
查看>>