react生命周期

跟風遠走 提交于 2020-01-04 01:22:30
constructor:
  1、当前生命周期函数的作用是用来做初始化工作的,
   在调用当前函数的时候必须在内部调用super,否则this的指向会发生错误
 
 
  2、 当前生命周期函数可以用来定义当前组件所需要用到的一些状态值



  3、 在constructor中如果需要使用props的时候需要在super中继承过来



componentWillMount:挂载前
  1、当前生命周期函数可以用来接受外部的数据,将外部的数据转换成内部的数据,在这个生命周期里面尽量不要使用
  setState 因为当前生命周期执行完毕以后就会执行render



  2、用来做最后数据最后的修改



  3、当前生命周期函数在新版本中被废除掉了



render:渲染
  1、当this.state/this.props发生改变的时候render函数就会执行

 

  2、 render函数每次执行的时候都会将虚拟DOM在缓存中缓存一份,当下一次render函数执行的时候,会与缓存中的
  虚拟DOM进行对比(这种对比叫做diff算法) 将发生改变的虚拟DOM进行更新
 
 
componentDidMount:挂载后
  当前生命周期函数我们可以通过this.ref来获取真实的DOM结构
  this.refs.属性

 

  ref={()=>{}}
  this.属性

 

  一般情况下我们都会在当前生命周期函数中做ajax数据的请求



 
shouldComponentUpdate
  1、当前生命周期函数必须有一个返回值,如果返回true则继续执行下面的生命周期函数,如果返回false则不会执行下面的生命
  周期函数

 

  2、shouldComponentUpdate生命周期函数中我们可以做性能的优化,如果说当前数据改变后没有必要进行render的
  渲染我们就可以return false 如果需要进行渲染则返回true 来减少不必要的渲染

 

  3、当前生命周期函数中会有2个参数一个是新的props 一个是新的state



  4、当前生命周期函数决定的是render函数是否渲染,而不数据是否更新



componentWillUpdate
  1、 当前生命周期函数用来做数据最后的更新处理

 

  2、当前生命周期函数中有2个参数 一个是新的props 一个是新的state



componentDidUpdate
  1、数据更新完毕,获取到数据更新后最新的DOM结构

 

  2、当前生命周期函数中会接收2个参数 一是旧的props 一个是旧的state
 
componentWillReceiveProps
  1、当this.props发生改变的时候那么当前生命周期函数就会执行
  2、当前生命周期函数中有一个参数 新的props
  3、可以用来做外部数据的处理



componentWillUnmount:
  1、当前生命周期函数用来做组件的销毁,
  2、一般情况下用来做事件的移除
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!