react 16版本生命周期

共有四个阶段

• 1. 初始化阶段
  • 钩子函数个数： 4
  • 注意点：主线程执行结束之后钩子函数才会执行，也可以说是异步
• 2. 更新阶段
  • 钩子函数个数： 5
• 3. 卸载阶段
  • 钩子函数个数： 1
• 4. 错误捕获阶段16.3后新增
  • 钩子函数个数： 1

1：初始化阶段

constructor() //构造函数

作用

1. 通过super来将绑定在组件身上的props赋值给 this.props
2. 定义state
3. 普通函数绑定this（改变this指向）

componentWillMount() // 表示组件即将挂载，用于初始化和生命周期

作用

1. 数据可以拿到，真实DOM拿不到，虚拟DOM也没有 可用作发送请求 更改数据

render() //渲染

作用

1. 底层 React.createElement
2. 解析 this.props 和 this.state
3. 将jsx元素渲染为vDom对象模型 ，也就意味着生成了虚拟DOM
4. 注意点：不能进行setState 原因：js是单线程的，render函数在解析状态的时候又setState更改状态，死循环

componentDidMount() //表示组件挂载结束

作用

1. 数据可以拿到， 可进行数据请求 数据更改
2. 真实dom可以拿到 可进行真实dom操作 第三方库实例化

2：更新阶段 ==> 触发条件setState / forceUpdate

componentWillReceiveProps()

作用

1.用于获取最新的属性
2.用于判断当前的属性是否改变过

shouldComponentUpdate() // 在此阶段用的最多的钩子函数

作用

1. 表示组件是否更新 这个钩子只要写就必须有返回值 返回值是布尔值
2. 这个钩子是性能优化的关键(true render更新阶段执行 否则 不执行)
3. 此处有一个坑：如果是状态 ，此处拿不到原状态。不能对比新旧状态😒,一般都用属性props

componentWillUpdate()

作用

1. 表述组件即将更新

render()

作用

渲染

componentDidUpdate()

作用

1. 表示组件更新完毕，真实DOM又生成了

补充：以上更新为props改变，state改变，没有componentWillReceiveProps()

3：卸载阶段

componentWillUnMount()

作用

1. 销毁时调用，清除无用的实例和事件

4：错误捕获阶段

componentDidCatch()

作用

1. 用于捕获子组件throw出来的错误