React 的组件生命周期

React 的组件分为函数组件和class组件，下面主要是class组件的一些API;

定义class组件，需要继承React.Component ，在该子类中必须要定义一个render函数，

一，挂载时生命周期调用：

1，constructor()
2, static getDerivedStateFromProps()
3, render()
4, componentDidMount()

下面说一下挂载时的生命周期方法：

1，consturctor(props)
如果不初始化state或不进行方法绑定，则不需要为React组件实现构造函数；
React组件挂载之前，会调用构造函数，组件实现构造函数时，构造函数内第一行要调用 super(props);

构造函数作用：1>,通过this.state赋值对象来初始化内部state; 2>, 为事件处理函数绑定实例；

constructor() 函数中不要调用setState()，组件内部需要state，则在构造函数中为this.state赋值初始state;在其他方法中的话可以使用this.setState()
避免将 props 的值复制给 state！这是一个常见的错误;

2,static getDerivedStateFromProps() 
该方法会在调用render方法之前调用，并且在初始化挂载及后续更新时都被调用，他返回一个对象来更新state；返回null则不更新任何内容；此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。

3，render() : (该函数为纯函数)
该方法是class组件中必须要实现的方法；
当render被调用，它会检查this.props和this.state的变化并返回以下类型之一：
    React元素，数组或fragments， Portals, 字符串或数值类型，布尔类型或者null
并且它不会直接与浏览器交互。如需与浏览器进行交互，请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render() 为纯函数，可以使组件更容易思考

4，componentDidMount() 
该方法会在组件挂载后调用，依赖于DOM节点的初始化应该放在这里，如果通过网络请求获取数据，此处是实现请求的好地方；此处也可添加订阅，添加后要记得在 componentWillUnmount()取消订阅；
可以在该方法中调用setState(),它将触发额外的渲染，此渲染发生在浏览器更新屏幕之前，如此保证即使两次调用render()的情况下，用户不会看到中间状态，慎重使用该模式，因为它会导致性能问题；

二，组件更新时的生命周期调用顺序如下：

1，static getDerivedStateFromProps()
2，shouldComponentUpdate()
3，render()
4，getSnapshotBeforeUpdate()
5，componentDidUpdate()

下面说一下更新时的生命周期方法：

1，static getDrivedStateFromProps() 方法同组件挂载时的方法一样；

2，shouldComponentUpdate()
当props或者state发生变化时，该方法会在渲染执行前被调用，返回值默认是true,首次渲染或使用forceUpdate()时不会调用该方法；

3，render() 方法同组件挂载时的方法一样；

4，getSnapshotBeforeUPdate()
该方法在最近一次渲染输出之前调用，它使得组件能在发生更改之前从dom中获得一些信息（例如滚动位置），此生命周期的任何返回值将作为参数传递给componentDidUpdate()

5，componentDidUpdate()
该方法会在更新后立即被调用，首次渲染不会执行此方法；当组件更新后，可以在此处对DOM进行操作，如果对更新前后的props进行了比较，可以选择在此进行网络请求；
可在该方法中调用setState(),但是必须包裹在一个条件语句中；

三，组件卸载调用方法

componentWillUnmpunt()

会在组件卸载及销毁之前调用，在此方法中可以执行比较的清理操作，例如：清除timer,订阅等；
该方法中不应调用setState(),因为该组件不会再重新渲染；

错误处理方法：

static getDerivedStateFromError()
此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state

componentDidCatch()
此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

error —— 抛出的错误。
info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。
componentDidCatch() 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况：