初步认知React生命周期

180 阅读1分钟

react生命周期

首先我们要先知道为什么要认识生命周期因为了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;

react生命周期分为挂载时,更新时,卸载时

生命周期.png

  1. 挂载时

这个阶段也被称为初始化

  • constructor{//该钩子用于 初始化 state}
  • componentWillMount() { console.log('组件即将挂载') }
  • render()//渲染
  • componentDidMount() {console.log('组件挂载完成')//可以做一些数据请求的操作 }
  1. 更新时

//是否要更新数据,如果返回true才会更新数据

shouldComponentUpdate(nextProps, nextState) {
    console.log('是否要更新数据')
    return true;				//返回true,确认更新
 }

//将要更新数据的时候触发的生命周期函数

  componentWillUpdate() {
    console.log('将要更新')
  }

//更新完成时触发的生命周期函数

  componentDidUpdate() {
    console.log('更新完成')
  }

3. ## 卸载阶段
componentWillUnmount() 组件即将卸载时的钩子 (一般用于清除定时器,解绑事件等)