react组件的生命周期

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

课程目标

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

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

知识点

1. react的类组件的生命周期分为三个阶段

• 实例期
• 存在期
• 销毁期

2. 实例期在组件第一次被实例化的时候触发一次，在这个过程中会执行的生命周期函数如下：

• constructor
• componentWillMount
• render
• componentDidMount

3. 存在期分为两种情况：

• 在组件内部调用了this.setState，此时会触发的生命周期如下：
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate
• 该组件的属性被再次传入的时候，此时会触发的生命周期如下：
  • componetWillReceiveProps
  • shouleComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

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

   • compoentWillUnmount

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

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

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

7. react生命周期图示

   
   tao-react生命周期图示.png

授课思路

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