react生命周期

装载过程:

Constructor:
初始化state;
绑定成员函数的this环境(bind、:: )防止以解构的方式进行全局作用域进行调用;
例:this.fn=this.fn.bind(this)或this.fn=::this.fn

GetInitialState:初始化state值,必须结合React.createClass()使用,使用es6的方式,此函数无效果;

  getInitialState:function(){
    return {
      name:"zhangsan"
    }
  },
    
  getDefaultProps:function(){
    return {
      name:"zhangsan" //这里的zhangsan相当于默认值
    }
  }
})

GetDefaultProps:初始化props值,必须结合React.createClass()使用,使用es6的方式,此函数无效果,用属性defaultProps代替;

  constructor(props){
super(props)
this.state={data:new Date()}
  }
  render(){
    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }
}

Test.defaultProps={
    name:"moren"
  }

ComponentWillMount:在render函数调用之前进行调用;

Render:并不做实际的渲染动作,只返回一个jsx描述结构,最后渲染与否由react来决定;必须是个纯函数,不能设计到数据的更变(this.setState);

    return (
      <ul>
        <li><ClickCount name="third" num={7}></ClickCount></li>
      </ul>
    )
  }

ComponentDidMount :在render函数调用之后进行调用;但不是在render函数调用之后立即调用,而是当所有的dom树挂载并渲染完成后才会调用,这是因为render函数并不进行渲染,而只是返回一个jsx对象,渲染的工作由react库进行,只有当所有的组件的jsx对象组合完毕之后,react通过对比后才会渲染,所有此钩子函数是发生的所有组件的render函数都执行后才会执行;(只能在浏览器端触发)
注:与angular中的link或者post函数有点相似,但是这里不仅指子组件,而是当前组件中的所有组件,包括兄弟组件;提供了dom操作的接口

更新过程:

ComponentWillReceiveProps: (参数只有props)传入的props的改变或者组件进行刷新(forceUpdate函数触发组件的刷新)都会触发此函数,但是通过this.setState改变的数据则不会触发此函数,

ShouldComponentUpdate:react组件的钩子函数两个需要有返回值的钩子函数之一,另一个为render,此钩子函数的返回值为一个bolen值,如果为true时,则prop的改变以及state的改变都会引起组件的刷新,如果为false时,则不再进行渲染;此钩子函数接受两个参数,一个是nextProps,一个是nextState,可以将将要更新的值和此时的做对比,然后返回true和false来进行性能的校优;

ComponentWillUpdate:跟componentWillMount相似
Render
ComponentDidUpdate:跟componentDidMount相似

卸载过程:

ComponentWillUnmount:此钩子函数可以在组件卸载前执行,可以进行手动添加dom元素的删除,以及计时器和事件监听的移除;

使用方法:

  setNumber(){
        this.setState({
           count:this.state.count+1
        },()=>{
            this.componentWillUnmount()   //调用销毁组件
        })
    }
//销毁生命周期
  componentWillUnmount(){
      if(this.state.count>3){
                //将要销毁的组件写入 括号中
  ReactDOM.unmountComponentAtNode(document.getElementById('root'))
            }

    }
点击button按钮 (实现数字加一,如果大于3时数字销毁组件)
 <button onClick={this.props.setNumber}>{this.props.count}</button>









1:construct 类似 Vue 中的 beforeCreated 和 Created;
操作:(1)数据的请求(2)当前组件的检测;

2:componentWillMount
介绍:类似Vue 中 beforemount ;在render函数调用之前进行调 用;:

3:render 纯函数 ;
操作 (1)不能调用setstate进行数据的改变,否则会陷入死循环
(2)不做数据的产生和保存,
(3)返回数据和Dom拼接好的jsx结构
注:(1)因为数据更新后会触发render周期 ,所以render中进行数据改变会陷入死循环(2)必须有返回值return

4:ComponentDidMount
介绍:dom编译完成,并渲染到真实dom中时调用
操作:(1)可以做dom的处理
(2)可以做具体的事件监听
(3)某些插件的实例化

5:componentWillReceiveProps
介绍:当父组件给子组件的数据改变时触发该函数
操作 (1)可以将props再次赋给state,也可以说是用来监听props改变

6:shouldComponentUpdate(props,state)
介绍:对于项目提高渲染性能时使用;
操作 (1)可以对props和state的值进行对比 然后通过返回true和false 来控制是否更新组件;(在浏览器->more tools->rendering里勾选Paing flashing可以高亮页面重绘的部分)
注:(1)必须有返回值 ture || false

7:componentWillUpdate
介绍 :在render之前最后一次可以改变数据的地方
8:componentDidUpdate 同 componentWillMount

9:ComponentWillUnmount:
介绍 :此钩子函数可以在组件卸载前执行,可以进行手动添加dom元素的 删除,以及计时器和事件监听的移除;
操作:(1)所有跟dom相关的操作,在组建销毁之前一定要在这里做相应的处理;否则会出错
整个react的组件的生命周期可以分成几种情况去执行:
组件第一次渲染:
getDefaultProps -> getInitialState -> componentWillMount -> render -> componentDidMount

卸载组件:
componentWillUnmount

组件第二次渲染:
getInitialState -> componentWillMount -> render -> componentDidMount

组件props发生改变:
componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

组件state发生改变(props并未改变):
shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate

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

推荐阅读更多精彩内容

  • 组件的生命周期方法分以下三个阶段。 Mounting当创建组件的实例并将其插入到DOM中时,将调用这些方法:con...
    _八神光_阅读 1,089评论 0 0
  • 在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是...
    web蜗牛阅读 557评论 0 1
  • 1,constructor()函数 *执行的时间:组件被加载前最先调用,并且仅调用一次 *作用:定义状态机变量 *...
    折梅踏雪阅读 379评论 0 0
  • 每个组件都有几个生命周期函数,以 will 为前缀的函数是在发生某些事之前调用,以 did 为前缀的是在发生某些事...
    我向你奔阅读 6,109评论 1 4
  • 这一部分内容一直一知半解,最近发现一篇文章,非常好的解释了生命周期的问题,留存在这里,以备后查! 简介 一个rea...
    春木橙云阅读 917评论 0 5