学习react之----react的生命周期函数

React官方文档：https://zh-hans.reactjs.org/

在react组件中，代码重用的主要方式是组合而不是继承；在React.component的子类中必须有一个render()函数。

              react的生命周期图谱https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

                                             

react组件生命周期的三个阶段及生命周期顺序

一、挂在(当组件实例被创建并插入DOM中时，生命周期顺序如下)

1.constructor()

       在react组件挂载之前，会调用它的构造函数。如果不初始化state或不进行方法绑定，则不需要为react组件实现构造函数。在为React.Component子类实现构造函数时，应在其他语句之前调用super(props)。否则，this.props在构造函数中可能会出现未定义bug。

       通常，在React中，构造函数仅用于一下两种情况：

       1)通过给this.state赋值对象来初始化内部state。

        2)为时间处理函数绑定实例。

2.static getDerivedStateFromProps()

        当state值在任何时候都取决于props时，调用getDerivedStateFromProps()方法;

        getDerivedStateFromProps()会在render方法之前调用，并且初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回nu'l'l则不更新任何内容。

3.render()

        render()方法是class组件中唯一必须实现的方法；render()函数为纯函数，它不会直接与浏览器直接交互，在不修改组件state的情况下每次调用时返回的结果相同；

        当render被调用时会检查this.props和this.state的变化，并且返回一下类型之一：
        1）react元素

       2）数组或fragments

        3）Portals

        4）字符串或数值类型

        5）布尔类型或null

4.componentDidMount()

         在组件挂载后插入DOM树中，立即调用，依赖于DOM的初始化应该放在这里。

         （白话：进入界面需要获取数据时使用）

         在componentDidMount()中可以直接调用setState()，将会触发渲染在浏览器之前，（请谨慎使用该模式，因为render()两次调用会导致性能问题，应该在constructor()中初始化state）

二、更新（组件中的props或state发生变化时会触发更新，组件更新的生命周期顺序如下）

1.static getDerivedStateFromProps()

2.shouldComponentUpdate()

         不常用的生命周期方法！shouldComponentUpdate(nextProps, nextState)根据返回值，判断React组件输出是否受当前state或props更改的影响。默认行为是state每次发生变化组件都会重新渲染。

          当props或state发生变化时，should Component Update()会在渲染执行之前被调用。返回值默认为true。首次渲染或使用forceUpdate()时不会调用该方法。

3.render()

4.getSnapshotBeforeUpdate()

          getSnapshotBeforeUpdate(prevProps, prevState)方法使用较少，它在最近一次渲染输出（提交到DOM节点）之前调用。使得组件能在发生更改之前从DOM中捕获一些信息。它的任何返回值将作为参数传递给componentDidUpdate()。

5.componentDidUpdate()

三、卸载(组件从DOM中移除)

1.componentWillUnmount()

四、错误处理（当渲染过程，生命周期，或子组件的构造函数中抛出错误时，调用一下方法）

1. static getDerivedStateFromError()

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

2. componentDidCatch()

         componentDidCatch()在“提交”阶段被调用，允许执行副作用（副作用是啥，我也没搞懂！！）；componentDidCatch(error, info)  该生命周期在后代组件抛出错误后被调用。它接收两个参数：

         1) error -------抛出的错误

          2) info --------带有componentStack key的对象，其中包含有关组件引发错误的栈信息。

四、错误处理

1.static getDerivedStateFromError()

2.componentDidCatch()