RN组件的生命周期(Component Lifecycle)

在iOS中UIViewController提供了(void)viewWillAppear:(BOOL)animated, - (void)viewDidLoad,(void)viewWillDisappear:(BOOL)animated等生命周期方法,在Android中Activity则提供了 onCreate(),onStart(),onResume() ,onPause(),onStop(),onDestroy()等生命周期方法,这些生命周期方法展示了一个界面从创建到销毁的一生。

那么在React 中组件(Component)也是有自己的生命周期方法的。

component-lifecycle.jpg

组件的生命周期分成三个状态:

  • Mounting:已插入真实 DOM
  • Updating:正在被重新渲染
  • Unmounting:已移出真实 DOM

心得:你会发现这些React 中组件(Component)的生命周期方法从写法上和iOS中UIViewController的生命周期方法很像,React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。

1、Mounting(装载)

constructor():

在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

  1. 第一个语句必须是super(props)。
  2. contructor将在任意一个RN组件被加载之前优先调用,并且只会调用一次。
  3. 该函数最大的作用是定义该组件当中需要使用的状态机变量 。

componentWillMount

  1. 该函数原型为componentWillMount()
  2. 该函数整个过程中只执行一次
  3. 该函数会在初始渲染前执行,即在render被调用之前调用
  4. 该函数执行后render就会调用。
  5. 如果在render中改变了某些状态机变量,那么RN不会执行渲染,而是等待该函数执行完毕后再次渲染。
  6. 子组件中同样拥有该方法,并会在父组件执行完毕后执行,该函数无返回值。
  7. 该函数适合于需要在本地读取一些数据用于显示,那么在render执行前调用是一个很好的时机。

render(渲染函数)

  1. 调用该方法,先对状态机变量与属性进行检查。
  2. 如果开发者不想渲染界面的话,可以在此处返回null或者false。
  3. 该方法适用于进行界面的JSX代码编写,因此不适合在此处对状态机变量进行修改或者访问服务器。

componentDidMount

  1. 该函数会在render渲染完毕之后调用,整个过程只执行一次。
  2. 该函数执行后,开发者就可以对界面上的组件或者子组件进行各种操作了。
  3. 该函数的应用场景适用于在移动端应用启动之后需要访问网络进行某些数据获取。

2、Updating (更新)

componentWillReceiveProps

  1. 该函数的原型为componentWillReceiveProps(nextProps);
  2. 当props(属性)发生改变或者接受到新的props时,该函数被调用,并接受一个输入参数,类型为Object,存放新的props,原先反生改变的旧的props仍然可以通过this.props访问。
  3. 该函数在RN初次被渲染的时候不会被调用。
  4. 如果在该函数当中对状态机变量进行了修改,RN不会立即渲染页面,而是会等待该方法执行完毕后一起渲染。

shouldComponentUpdate:(组件是否需要更新)

  1. 该函数原型 : boolean shouldComponentUpdate(nextProps,nextState);
  2. 当props(属性)或者状态(state)发生改变的时候会触发该函数,分别对应接收的两个参数,根据返回的布尔值来决定是否需要对页面进行重新渲染,如果不进行渲染,那么该方法后续的componentWillUpdate与componentDidUpdate都不会被执行。
  3. 该函数默认会返回true。
  4. 应用场景:可以在该函数中编写一些逻辑来判断渲染类型,来阻值一些没有必要的重新渲染,达到提升应用运行效率的目的。

componentWillUpdate

  1. componentWillUpdate(object nextProps, object nextState):在接收到新的 props 或者 state 之前立刻调用。
  2. 该方法原型与上一方法相同,在重新渲染前会调用该方法,为渲染进行准备工作。
  3. 该函数无返回值。
  4. 注意:在该方法中,不应该对状态机变量进行修改,要改变,也应该在1.1.5当中进行。

componentDidUpdate

  1. componentDidUpdate(object prevProps, object prevState):在组件的更新已经同步到 DOM 中之后立刻被调用。
  2. 该函数会在重新渲染render之后调用,传入上个方法必须的两个参数即可。

3、Unmounting(移除)

componentWillUnmount

该方法会在RN卸载之前调用,无参无返回值,在该方法中,需要对该组件当中申请或者订阅的某些资源与消息进行释放。

在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素。

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

推荐阅读更多精彩内容