React 生命周期

React生命周期如下图所示:


React生命周期

如上图,react生命周期主要可以分组件挂载、组件更新及组件卸载三个部分。

一、组件挂载

组件挂载主要是完成组件状态的初始化,设计两个生命周期函数:componentWillMount和componentDidMount。主要包含以下几个点:

  1. static propTypes={}static defaultProps={}: 分别定义了组件的props类型检查和默认参数。static表明这两个属性被声明为静态属性,意味着从类外面也可以访问他们,比如:类名.propTypes。

  2. constructor(): 用于组件初始化工作,如:定义this.state的初始内容。constructor()接受两个参数:props,context,是指父组件传下来的的props,context。注意:如果想在constructor()内部使用props或context,需要将props、context传入super(),在组件其他地方可以直接使用。

  3. componentWillMount: 在组件挂载到DOM前调用,因此在这里调用this.setState不会引起组件重新渲染。

  4. componentDidMount: 在组件挂载到DOM后调用,在这里调用this.setState会触发组件再次渲染,并且在此时,dom节点已经生成,故而可以在此获取真实dom、进行ajax请求等。

注意: componentWillMount 和componentDidMount 只会执行一次,即组件第一次初始化时。

二、组件更新

组件更新涉及四个生命周期函数:componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate。下面按触发的先后顺序进行介绍。

  1. componentWillReceiveProps(nextProps): 在接收父组件改变后的props时触发。可以通过比较传入的nextProps与当前this.props,对组件进行操作。

  2. shouldComponentUpdate(nextProps, nextState): 唯一一个用于控制是否让组件重新渲染的生命周期函数。如果不想让组件重新渲染,return false即可。

  3. componentWillUpdate (nextProps,nextState): shouldComponentUpdate(nextProps, nextState)返回true之后,就会触发组件重新渲染,进入componentWillUpdate 函数。

  4. componentDidUpdate(prevProps,prevState): 组件只有在第一次更新完成后才会进入componentDidmount,之后都是进入componentDidUpdate。prevProps和prevState是更新前的props和state。同componentDidMount ,componentDidUpdate()执行时,dom也已经真正被添加到HTML中,故也可在此对dom进行操作。

补充说明:
  1. 造成组件更新的情况有两类:一类是props变化,另一类是state变化。

    第一类情况就是当父组件重新渲染的时候,props重传导致。此时,无论props是否发生变化,子组件都会重新渲染。此处,可通过上述componentWillReceiveProps(nextProps)进行优化。

    第二类情况就是组件本身调用this.setState()引起,无论state是否变化,都会重新渲染。但由于是自身引起,故不会触发componentWillReceiveProps方法。另外,此种情况同样可通过shouldComponentUpdate(nextStates)优化。

  2. 只有在componentWillMount、componentDidMount、componentWillReceiveProps与componentDidUpdate四个方法中才能调用this.setState(),且在componentWillMount中调用无意义。

三、组件卸载

组件卸载涉及两个生命周期函数:componentWillUnmount和componentDidMount。

  1. componentWillUnmount(): 在组件卸载前调用,一般执行一些清理工作,如:清除定时器(setTimeout,setInterval)、清除时间监听(removeEventListener)、清除手动创建的dom等。

  2. componentDidMount(): 组件卸载后执行的一些操作。

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

推荐阅读更多精彩内容