React Native 组件生命周期

IOS - ViewController 生命周期

init

loadView

viewDidLoad

viewWillApper

viewWillLayoutSubviews

viewDidLayoutSubviews

viewDidApper

viewWillDisapper

viewDidDisapper

(viewWillUnload->viewDidUnload)

dealloc

React Native 组件生命周期

1.创建阶段

getDefaultProps:function(){}

2.实例化阶段

getInitialState:function(){}  //获取this.state的默认值

componentWillMount:function(){}  //render之前调用此方法,业务处理放在此方法中

render:function(){}        //渲染返回一个虚拟DOM

componentDidMount:function(){}  //该方法发生render方法之后。ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构

3.更新阶段

componentWillRecieveProps:función(){}  //该方法发生在this.props被修改或福组件调用setProps()方法之后

shouldComponentUpdate:function(){}  // 是否需要更新

componentWillUpdate:function(){}  //将要更新

componentDidUpdate:function(){}  //更新完毕

4.销毁阶段

componentWillUnmount:function(){}  //销毁

整个ReactJS 的生命周期中,主要经历这4个阶段


创建阶段:

该阶段主要发生在创建组件类的时候,即调用React.createClass。这个阶段只会触发一个getDefaultProps方法,该方法返回一个对象,并缓存下来然后与父组件指定的props对象合并,并最后赋值给this.props作为该组件的默认属性。

实例化阶段:

该阶段主要发生在组件类被调用的时候。这一阶段会触发一系列的流程。

getInitialState 初始化组件的state的值,返回值会赋值组件的this.state属性

componentWillMount 根据业务逻辑来对state进行相应的操作

render 根据state的值,生成页面需要的虚拟DOM结构,并返回该结构。

componentDidMount  对根据虚拟DOM结构而生成真实DOM进行相应的处理。

更新阶段:

该阶段发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应的页面结构的调整。该阶段发生的一系列流程如下:

componentWillReceiveProps(object nextProps) 当组件接收到新的props时,会触发该函数。在该函数中,通常可以调用this.setState方法来完成对state的修改

shouldComponentUpdate(nextProps, nextState) 该方法用来拦截新的props或state。然后根据事先设定好的判断逻辑,做出要不要更新组件的决定。

componentWillUpdate(object nextProps, object nextState) 当步骤shouldComponentUpdate方法中拦截返回true的时候,就可以在该方法中做一些更新之前的操作。

render 根据diff算法,生成需要更新的虚拟DOM数据。

componentDidUpdate 该方法在组件的更新已经同步到DOM中后触发

销毁阶段

componentWillUnmount 当组件从DOM中移除的时候,会触发的方法。我们通常会做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。



props: 它是一个对象,是组件用来接受外面传来的参数。组建内部是不能够修改自己props属性。只能通过父组件来修改,上面的getDefaultProps方法便是处理props的默认值。

state: 它是组件的属性,主要用来存储组件需要的数据,它是可以改变的。它的每次改变都会引发组件的更新,这是ReactJS中的关键点之一。每次数据的更新都是通过修改state属性的值,然后ReactJS内部会监听state属性的变化,一旦反生变化,就会主动触发组件的render方法来更新DOM结构。




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

推荐阅读更多精彩内容