react-native学习笔记之 生命周期

刚开始接触RN时时一脸懵逼,由于之前没怎么搞过前端开发,所以看网上的例子和源码都是一头雾水。iOS中有viewDidLoad(初始化界面)、viewWillAppear(布局)、viewWillDisappear、viewDidAppear几个状态方便我们掌握程序的动向。

一个React Native组件的生命周期分为实例化、存在期和销毁期,其中最常用的为实例化期,该时期即组件的构建、展示时期,需要开发者根据几个函数的调用过程,控制好组件的展示和逻辑的处理。能为了更好理解好别人的代码和源码更近了一步

(1)实例化期分为5个阶段,每个阶段以一个函数来进行控制,具体如下:

Paste_Image.png

getDefaultProps:顾名思义,这里会初始化一些默认的属性,通常会将固定的内容放在这个过程中进行初始化和赋值,一个控件可以利用this.props获取在这里初始化它的属性,由于组件初始化后,再次使用该组件不会调用getDefaultProps函数,所以组件自己不可以自己修改props(即:props可认为是只读的),只可由其他组件调用它时在外部修改。所以无法调用

this.setProps({
     showText:'Hello world'
});

此函数调用在getInitialState:函数之前不过在ES6中已经不是当前的调用形式在ES6中如下调用

//ES6 这两个属性不能卸载class内

class CTestDemo extends Component{
  render()
  {return(
    <Text>{this.props.showText}</Text>
    );}
}
CTestDemo.propTypes={
//属性校验期,表示改属性必须是bool,否则报错
showText:React.PropTypes.bool
};
CTestDemo.defaultProps={//设置默认属性
   showText:'Hello world'
};

getInitialState:这里是对控件的一些状态进行初始化,由于该函数不同于getDefaultProps,在以后的过程中,会再次调用,所以可以将控制控件的状态的一些变量放在这里初始化,如控件上显示的文字,可以通过this.state来获取值,通过this.setState来修改state值,修改方式如下:

getInitialState(){
  return{
   showText:'Hello world'      
 }
}
this.setState({
   showText:'Hello world'  
});

以上方法也是ES5的写法,最新的ES6写法有变更

 constructor(props){
  super(props);
  this.state={
   showText:'Hello world'  
  }
}

以上都是ES5ES6的区别本质上都是一样的,

componentWillMount:可以通过字面意思看出,这个方法被调用时期是组件将要被加载在视图上之前,功能比较少,即:render一个组件前最后一次修改state的机会。相当于iOS中的viewWillAppear
render:上面已经说过render是一个组件必须有的方法,形式为一个函数,并返回JSX或其他组件来构成DOM,和Android的XML布局、WPF的XAML布局类似,只能返回一个顶级元素,即:值得注意的是,一旦调用了this.setState方法,控件必将调用render方法,对控件进行再次的渲染.不过,如果React框架会自动根据DOM的状态来判断是否需要真正的渲染

componentDidMount:即调用了render方法后,组件加载成功并被成功渲染出来以后所执行的hook函数,一般会将网络请求等加载数据的操作,放在这个函数里进行,来保证不会出现UI上的错误,相当于ios中的viewDidAppear如图所示,_fetchData利用了fetch API来异步请求Web API来加载商品数据:

Paste_Image.png

(2)存在期主要是用来处理与用户的交互,如:点击事件,都比较简单,也不是很常用,具体有以下几个过程:
componentWillReceiveProps:指父元素对组件的props或state进行了修改
shouldComponentUpdate:一般用于优化,可以返回false或true来控制是否进行渲染
componentWillUpdate:组件刷新前调用,类似componentWillMount
componentDidUpdate:更新后的hook
(3)销毁期,用于清理一些无用的内容,如:点击事件Listener,只有一个过程:componentWillUnmount

3.总结

Paste_Image.png

总得来讲,React Native组件的生命周期,经历了Mount->Update->Unmount这三个大的过程,即从创建到销毁的过程,如果借助iOS的开发思想,那么React Native组件的生命周期就更容易理解了。那么,我们构建一个React Native控件也就能够知道如何下手,如何控制和优化。经过一层一层的封装和调用,一个完整的React Native应用也就构建出来了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,009评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,808评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,891评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,283评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,285评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,409评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,809评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,487评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,680评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,499评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,548评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,268评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,815评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,872评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,102评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,683评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,253评论 2 341

推荐阅读更多精彩内容