react 生命周期函数

1,constructor()函数

*执行的时间:组件被加载前最先调用,并且仅调用一次

*作用:定义状态机变量

*注意:第一个语句必须是super(props),正确定义状态机代码如下:

constructor(props){

super(props),

this.state={

content:null

}

}


2.componentwillmount()

*执行时间:组件初始渲染(render()被调用前)前调用,并且仅调用一次

*作用:如果在这个函数中调用setState改变某些状态机,react会等待setState完成后再渲染组件

*注意:子组件也有componentWillMount函数,在父组件的该函数调用再被调用

3.render()

*执行时间:componentWillMount之后,componentDidMount之前

*作用:渲染挂载组件

*触发条件:(1)初始化加载页面(2)状态机改变setState,(3)接受到新的props(父组件更新)

*组件所必不可少的核心函数,不能在该函数中修改状态机state

4.componentDidMount()

*执行时间:render()之后被调用,并且仅调用一次

*作用:渲染挂载组件,可以使用refs(备注:React支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中,这也就是说对render返回的组件进行一个标记,可以方便的定位这个组件实例)

*注意:自组件也有该函数,在父组件的该函数调用前被调用。如果在该函数中修改某些状态机state,会重新渲染render组件。所以有些组件为减少渲染次数,可以将某些修改状态机的操作放在componentWillMount函数中,如果需要再程序启动显示初始化页面后从网络获取数据,可以将网络请求的代码放在该函数中。

5.componentWillReceiveProps(nextProps)

*执行时间:组件渲染后,当组件接受新的props时调用,该函数接受一个object参数,新的(props),props是父组件传递给自组件的,父组件发生render的时候子组件就会调用

*作用:渲染挂载组件,可以使用refs(备注:react支持一个特殊的属性,你可以将这个属性加在任何通过render()返回的组件中,这也就是说对render返回的组件进行一个标记,可以方便的定位这个组件实例)

注意:react初次渲染时,该函数并不会被触发,因此有时候该函数需要和componentWillMount和componentDidMount组合使用,使用该函数一定要加nextprops参数,首次使用了解的可以先打印结果(nextProps);

6.shouldComponentUpdate(nextProps,nextState)

*执行时间:组件挂载后(即执行完render),接受到新的props和state时被调用,即每次执行setState都会执行该函数,来判断是否重新render组件,默认返回true;接受两个函数,第一个是新的props,第二个是新的state,

*作用:如果有些变化不需要重新render组件,可以在该函数中阻拦。

*注意:该方法在初始化渲染的时候不会调用,在使用forceUpdate方法的时候也不会。

7.componentWillUpdate()

*执行时间:在接受到新的props或者state,重新渲染之前立刻调用,在初始化渲染的时候不会被调用,

*作用:为即将发生的重新渲染做一些准备工作

*注意:不能在该函数中通过this.setState再次改变状态机,如果需要,则在componentWillReceiveProps函数中改变

8:componentDidUpdate()

*执行时间:重新渲染后调用,在初始化渲染时该方法不会被调用,

*作用:使用该方法可以在组件更新之后操作DOM元素

9.componentWillUnmount()

*执行时间:组件被卸载前调用

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

注意:*当一个页面中存在子父组件时,要注意componentWillMount和componentDidMount的使用,如果需要先加载父组件(获取网路数据),父组件传值给子组件,再加载子组件(获取网路数据),那么不能同时在子父组件中使用componentDidMount获取网路数据,因为会先执行子组件的componetDidMount,会由于未得到父组件的传值而报错。解决方案:(1)父组件componentWillMount,子组件:componentDidMount,(2)父组件:componentWillMount,子组件:componentDidMount

*当一个页面中如果要实现左右联动的效果,(比如a页面中包含b1(左)和b2(右)页面,单击b1中的知识点,b2页面内容对应变化,b1向b2通过redux传参,b2首次通过componentDidMount接收,后来通过componentWillReceiveProps接收)

参考来源:https://blog.csdn.net/zrcj0706/article/details/78608740

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

推荐阅读更多精彩内容

  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 6,846评论 7 41
  • 生命周期流程图简单如下: 组件让你把用户界面分成独立的,可重复使用的部分,并且将每个部分分开考虑。React.Co...
    Simple_Learn阅读 1,070评论 0 0
  • 实例化 首次实例化 getDefaultProps getInitialState componentWillMo...
    Oo晨晨oO阅读 155评论 0 1
  • 在React Native中使用组件来封装界面模块时,整个界面就是一个大的组件,开发过程就是不断优化和拆分界面组件...
    ITxiansheng阅读 936评论 1 2
  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,087评论 0 0