React生命周期

生命周期

初始化阶段

    constructor
       - 在组件挂载之前执行，调用super(props),用来将父组件传来的props绑定到这个类中，使用this.props将会得到。
       - 定义状态
           - 状态初始化也可以有父组件传递过来的属性来进行赋值 

  - static getDerivedStateFromProps ( nextProps,prevState ) {} 
      - 在组件实例化后，和接受新的props后被调用。他必须返回一个对象来更新状态，或者返回null表示
      - 新的props不需要任何state的更新。  

  - componentWillMount () {}  组件即将挂载     
      - 数据请求
      - 将请求来的数据赋值给当前组件的状态

  - render 函数
      - 当他被调用时，他将计算this.props和this.state，返回一个类型

  - componentDidMount
      - 组件装载结束，将VDOM 渲染成了真实DOM
      - 操作真实DOM( 第三方实例化 )
      - 数据请求 （ 阿里用 ）

更新阶段

-当组件mount到页面中之后，就进入了运行中阶段，在这里有5个钩子函数，但是这5个函数只有在数据（属性、状态）发送改变的时候才会执行

1. componentWillReceiveProps

• 当父组件给子组件传入的属性改变的时候，子组件的这个函数才会执行
  当执行的时候，函数接收的参数是子组件接收到的新参数，这个时候，新参数还没有同步到this.props上,
  多用于判断新属性和原有属性的变化后更改组件的状态
  由状态来控制属性的更改

2. 接下来就会执行shouldComponentUpdate,这个函数的作用：
   当属性或状态发送改变后控制组件是否要更新，提高性能,返回true就更新，否则不更新，默认返回true
   接收nextProp、nextState，根据根据新属性状态和原属性状态作出对比、判断后控制是否更新
3. componentWillUpdate,在这里，组件马上就要重新render了，多做一些准备工作，不要在这里修改状态，
   否则会死循环相当于Vue中的beforeUpdate
4. render，重新渲染dom
5. componentDidUpdate，在这里，新的dom结构已经诞生了,相当于Vue里的updated

销毁阶段

当组件被销毁之前的一刹那，会触发componentWillUnmount

相当于Vue里的beforeDestroy，

Vue在调用$destroy方法的时候就会执行beforeDestroy，然后组件被销毁，这个时候组件的dom结构还存在于页面结构中，也就说如果想要对残留的dom结构进行处理必须在destroyed处理，但是react执行完

错误处理

    import React from 'react'

    class Error extends React.Component {   
      constructor(props) {     
        super(props);     
        this.state = { error: false };
      }
      componentDidCatch(error, info) {    
        console.log('错误处理-componentDidCatch') 
        this.setState({ error, info });
      }

      errorHandle = () => {
        this.setState({
          error: true
        })
      }

      render() {
        if (this.state.error) {
          return (
            <div>
              <p> 报错了 </p>
              {
                console.log(new Error("YOLO"))
              }
            </div>
          )
        }
        return (
          <div>
            <button onClick = { this.errorHandle }>
              抛出错误
            </button>
          </div>
        );   
      } 
    }

    export default Error