react第三单元(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生命周期图示

#授课思路

#案例和作业

1. 实现菜单的展示以及下拉菜单效果(自行模拟数据)