react面试：基础知识（二）React生命周期与React17版本后的生命周期区别

一、React17之前的生命周期：

（一）初始化initalization：通过构造函数来实现，同时继承React基类，这样才能有render方法等方法，这就是为什么函数组件不能使用这些方法的原因，例如：

只要使用了constructor()就必须写super(),否则会导致this指向错误，pops指父组件的props注入子组件，这可以地方还可以定义this.state的初始化内容：

import React, { Component } from 'react';

class Test extends Component {
  constructor(props) {
    super(props);
  }
}

（二）挂载Mounting：

     此阶段分为componentWillMount，render，componentDidMount三个时期。

     componentWillMount（将react17版本将废除）： 用的很少，在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，这个代码可以写在构造函数中。

     render:  根据组件的props和state,return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。    

     componentDidMount: 组件挂载到DOM后调用，且只会被调用一次

（三）渲染updation：     

     在讲述此阶段前需要先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。

componentWillReceiveProps(在17.0中已经废除掉了)

shouldComponentUpdate(newProps,newState)

componentWillUpdate(在17.0中已经废除掉了)

render

componentDidUpdate：更新后： (1)当前生命周期中可以获取到数据更新后最新的DOM结构； (2)注意当前生命周期会执行多次，所以当需要做业务逻辑操作时一定要判断；

 

（四）卸载unMounting：

      此阶段只有一个生命周期方法：componentWillUnmount,此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

二、React17之后的生命周期(由于优化了核心算法，即发布了Fiber特性功能）：

原来（React v16.0前）的生命周期在React v16推出的Fiber之后就不合适了，因为如果要开启async rendering，在render函数之前的所有函数，都有可能被执行多次。

原来（React v16.0前）的生命周期有哪些是在render前执行的呢？

• componentWillMount
• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate

到了React v16.4后的版本，大改动来了，引入了两个新的生命周期函数： getDerivedStateFromProps，getSnapshotBeforeUpdate

static  getDerivedStateFromProps：根据传入的props来更新state，getDerivedStateFromProps前面要加上static保留字，声明为静态方法，不然会被react忽略掉，React Class组件中，静态方法getDerivedStateFromProps无权访问Class实例的this，即this为undefined。从版本16.3开始，更新state以响应props更改的推荐方法是使用新的静态 getDerivedStateFromProps生命周期。 （生命周期在组件创建时以及每次收到新的props时调用），如果某些props的情况下不需要更新state，直接返回null即可。实际上这个方法和componentDidUpdate搭配使用，就能覆盖componentWillReceiveProps的所有使用场景了。

getSnapshotBeforeUpdate：在更新之前获取组件的快照，在组件更新前触发，被调用于render之后，可以读取但无法使用DOM的时候。它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。此生命周期返回的任何值都将作为参数传递给componentDidUpdate（），和componentDidUpdate一起使用，就能覆盖掉componentWillUpdate的所有使用场景了。

componentDidCatch(error, info)：如果一个组件定义了componentDidCatch生命周期，它将成为一个错误边界，错误边界会捕捉在渲染期间、在生命周期方法中和在构造函数中的错误，就像使用try catch，不会将错误直接抛出了，保证了应用的可用性。

 

三、异步api调用放在哪一个生命周期函数中：

     ⽬前官⽅推荐的异步请求是在componentDidmount中进⾏。如果有特殊需求需要提前请求，也可以在特殊情况下在constructor中请求。react 17之后 componentWillMount会被废弃，仅仅保留UNSAFE_componentWillMount。