react组件的生命周期

第三单元(react组件的生命周期)

课程目标

  1. 灵活掌握react组件的生命周期以及组件的活动过程。

  2. 能够灵活使用react的生命周期

知识点

  1. react的类组件的生命周期分为三个阶段
  • 实例期
  • 存在期
  • 销毁期
  1. 实例期在组件第一次被实例化的时候触发一次，在这个过程中会执行的生命周期函数如下：
  • constructor
  • componentWillMount
  • render
  • componentDidMount
  1. 存在期分为两种情况：
  • 在组件内部调用了this.setState，此时会触发的生命周期如下：
    • shouldComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate
  • 该组件的属性被再次传入的时候，此时会触发的生命周期如下：
    • componetWillReceiveProps
    • shouleComponentUpdate
    • componentWillUpdate
    • render
    • componentDidUpdate

  1. 销毁期指的是组件被卸载的时候，此时有一个声明周期函数会执行：(一般这个生命周期函数中可以做一些清除的工作)

    • compoentWillUnmount

  2. 一般在constructor componentWillMount componentDidMount这些生命周期中初请求接口。尽量不要在始化调用componentWillUpdate componentDidUpdate render中去调用请求接口，也不要去写太多的逻辑、不要调用this.setState。

  3. 每个生命周期接收的参数

  • componentWillReceiveProps(nextProps){}
  • shouldComponentUpdate(nextProps, nextState){}
  • componentWillUpdate(nextProps, nextState){}
  • componentDidUpdate(prevProps, prevState){}

  1. react生命周期图示


    tao-react生命周期图示.png

授课思路

第三单元(react组件的生命周期).png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容