react生命周期

react 生命周期

react生命周期和vue一样也是三个阶段：初始化==> 运行中 ==> 销毁阶段

• 初始化阶段：

  //此时期就相当于vue的beforeCreate和created，初始化状态的合适时机
  //可以根据props(属性)设置state(状态)
  //在这里bind绑定自定义方法的rhis是最合适的
  constructor (props){
      super(props)//设置props,传入props，this上会出现props
  }
  

  //该时期相当于vue的beforeMount
  //修改state，不会触发update，在react项目中一般在此处做数据的初始化获取
  componentWillMount(){
      
  }
  

  //在vue中，vue会判断此数据有没有使用（在模板中渲染）,如果没有使用，即使改变也不会重新渲染；但是在react中，只要状态发生了改变（setState），都会重新render
  render(){
      //render函数只是返回一段jsx结构（虚拟DOM)结构，并非是它渲染页面，具体实现则是由底层的未见的方法实现
  }
  

  //相当于vue中的mounted
  //可以操作真是的DOM，标志初始化结束
  //
  componentDidMount(){
      
  }
  
  

1. 父组件在render的过程中会触发子组件的初始化阶段，当所有的子组件都装载完成后，父组件才会执行didmount

2. 类中的默认属性是组件实例共享的，因为组件实例无法更改这个默认属性，传入后使用传入的属性，对默认属性没有破坏，所以可以共享，状态则不然，需要为每一个组件的实例挂载自己唯一的状态

• 运行中阶段：此时只要数据（props，state）变化就会触发对应的生命周期钩子函数

//父组件传入的props属性变化后执行，在这里，新的属性还没有挂载到this上，传入的参数props是最新的props

//可以根据变化后的属性去更改自己的状态，此时不会因为状态的改变而去执行额外的钩子函数
componentWillReceiveProps(props,state){
    
}

//此时会接收两个参数
//当属性或者状态变化后都会执行，需要返回true和false，默认返回true，控制是否执行下面的钩子函数（是否重新渲染）
//this上的属性和状态还不是最新的，最新的需要从函数参数中取得，可以根据数据的变化来避免不必要的重新render
shouldComponentUpdate(nextProps,nextState){
    
}

注意：即使变化后的属性和状态和原来一样，也算变化

​ 通常会在这里做一些react性能优化，若变化前后的属性和状态一样，则减少不必要的重新render

//此时最新的属性和状态依然没有挂载到this上，相当于vue中的beforeUpdate，不能更改数据，会造成死循环，可以做一些输出、调试、监测
componentWillUpdate(nextProps,nextState){
    
}

//再次render
render(){
    
}

//此时最新的props和state已经挂载到this上，而参数接收到的则是旧的props和state
componentDidUpdate(prevProps,prevState){
    
}

###注意：
当数据（属性或状态）变化引起的组件重新渲染后执行，并且无论数据变化，只要重新render都会执行

在vue中如果我们想要等到某一条数据变化所引起的dom重新渲染完成后进行操作，我们不能在updated里使用，因为updated不能分辨是数据变化，只能在watch中使用，但是watch监听到的时候数据刚刚变化，还没有rerender，所以需要使用nextTick

而在react中，我们没有nextTick，但是componentDidUpdate会接收到变化前的数据，我们就可以根据变化前的数据和变化后的数据进行判断处理

• 销毁阶段：

  //相当于vue中的beforeDestory(此时vue中还有DOM，可进行某些操作)，vue中还有destory,react中只有这一个，执行完之后DOM全部销毁 
  //组件销毁前执行，完成善后工作
  componentWillUnMount(){
      
  }
  //销毁组件，vue中调用$destory方法，在react中切换组件，或者调用ReactDOM.unmountComponentAtNode(element)方法销毁