React Native中组件的生命周期

React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分)。


一.constructor(props)

该函数是用于对组件的一些状态进行初始化,可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值。

constructor(props) { 
  super(props); 
  this.state = { };
 }

二.componentWillMount

相当于OC中的ViewWillAppear方法,在组件将要被加载在视图上之前调用,功能相对较少。一般在这里发网络请求

三.render

render是一个组件中必须有的方法,本质上是一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局类似,注意:只能返回一个顶级元素 ;

此外,在render函数中,只可通过this.state和this.props来访问在之前函数中初始化的数据值 。

四.componentDidMount

在调用了render方法后,组件加载成功并被成功渲染出来以后,所要执行的后续操作,一般会在这个函数中处理网络请求等加载数据的操作;

因为UI已经成功被渲染出来, 所以放在这个函数里进行请求操作,不会出现UI上的错误。

五.存在期阶段函数功能分析

componentWillReceiveProps
指父元素对组件的props或state进行了修改

shouldComponentUpdate
一般用于优化,可以返回false或true来控制是否进行渲染

componentWillUpdate
组件刷新前调用,类似componentWillMount

componentDidUpdate
更新后的相关操作

六.销毁期阶段函数功能分析

用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

七.常用知识点分析

this.state

开发中组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容