react生命周期剖析

一、类生命周期

1.在react中，生命周期只有类组件才有，函数组件没有生命周期

在现在开发过程中，以函数组件为主要开发，类组件几乎被抛弃，因为类组件不灵活，现在的编程偏向与函数式编程

1.生命周期 -- 挂载 constructor -- 是用于初始化数据 ,不能在这里写setState()调用方法

getDerivedSateFromProps --派生state props使用，把props数据映射成state数据，这个函数必须返回一个对象，

没有this对象，因为它是一个static函数

render -- react渲染函数方法，不能调用setState方法

componentDidMount --等同于Vue的mounted挂载。是一个重要的生命周期，用于初始化的时候，异步获取数据的方法

//这是第一个生命周期和类的实例化有关 -- new 调用的第一个方法是什么 constructor函数  在写法用法上这个生命周期几乎被抛弃了
constructor(){ //这个地方是开始加载的时候调用一次，可以初始化state数据
 super()
 this.state={
  list:[],
  show:true
}
 //赋值
  //在一个类组件没有完成挂载前不能调用setState方法
  //因为在渲染页面时会发生一个用法错误，说明在不该赋值的地方进行赋值，这个只会在类组件中发生
}

//这是导出的组件挂载
<App rate={.08} />


//这个生命周期用于 接收 父组件传递的 参数 ，并且把这个参数转为一个state数据
//它是创建的第二个生命周期，还是更新的第一个生命周期，主要是用于把props值来进行派生（使用）
//从props获取派生state
//这个生命周期必须返回一个对象，可以为null 
static getDerivedStateFromProps(newProps,newState){
   console.log(arguments,this)
  //如果state中没有这个税率数据，那么就给state添加上税率数据
  //因为当前方法是一个静态方法，那么它没有在实例上调用，所以没有this
 //if(this.state.tate)
  if(!newState.rate){
   //这个函数必须返回数据 -- 那么这里返回的数据会被添加到state数据中去
  //返回的数据和当前的state进行的是一个Object.assign（state,返回的数据）
  return{
   rate:newProps.rate
}
}else{ return  null }
}

数据模拟

getList(){
  return new Promise(resolve=>{
  let list = Array.from(Array(6),(_,i)=>{
  return {id:'jack' + i,
              name:'jack0'+(i+1),
              amount:Math.ceil(Math.random() * 10000 + 20000)}
})
resolve(list)
})
}
//模拟异步数据获取

//相当于vue的mounted生命周期  获取数据异步请求
async componentDidMount(){
  let list = await this.getList()
  this.setState({ list })
}

componentDidUpdate(oldProps,oldState){
  console.log('------- componentDidUpdate 形参state对象',oldState)
  console.log('--------componentDidUpdate 当前this.state对象',this.state)
  //当遂率发生变化的时候，重新计算已经有计算的结果，否则不执行计算

  if(oldState.rate !== this.state.rate){
   let list = this.state.list.map(it =>{
  //已经计算过的才会进行计算
  if(!!it.rateAmount) it.rateAmount = (it.amount - 5000) * (this.state.rate * 100) /100
   return it
})
  //setState会触发更新声明周期 -- 引进递归 ，所以当前生命周期调用setState必须加条件
   this.setState({
   list
})
}
}

//必须生命周期 -- 执行组件渲染的一个方法
render(){
   //setState 是更新state数据的方法，它的执行会引起render方法执行对组件进行重新渲染，在render方法中调用会引起无线递归 -- 死循环
  
}

2.生命周期 -- 更新

3.生命周期 -- 销毁

componentDidMount(){
   window.addEventListener('resize',this.resizeEvt)
}
resizeEvt(){
  console.log('------- 执行resize',Date.now())
}
//加载生命周期
conponentWillUnmount(){
//前两个参数必传类型，对象
  window.removeEventListener('resize',this.resizeEvt)
}