React 组件生命周期

React 组件生命周期分为四个阶段初始化、运行中、销毁、错误处理(16.3之后)

注意： 生命周期钩子函数不允许写成箭头函数

初始化：

• constructor()

    * 初始化属性 ， 定义状态 和 为事件处理函数绑定实例
    * 初始化属性： 将父组件绑定在子组件身上的属性获取到 ， 然后 通过super继承给子组件 的 porps属性上
    * 定义状态 ： this.state={}
  

• static getDerivedStateFromProps() 17.xx版本使用

• componentWillMount()/UNSAFE_componentWillMount()15.x版本的

    * 组件即将挂载之前调用，能拿到数据，进行数据的同步修改
    * 不能获取真实DOM
    * 可以进行数据请求和数据修改
    * 17.x后被废弃
    * setState可以在此钩子中使用，但不推荐
  

• render()

  • 将jsx语法 ==> 虚拟Dom(vDom)
  • 状态和属性发生改变会调用

• componentDidMount()

  • 组件挂载完成后调用，能拿到数据 和 真实Dom
  • 建议在这进行数据请求 和 数据修改
  • 第三方库的实例化

运行中 :

• componentWillReceiveProps ( nextProps )

    *  当 Props 改变时触发
    * nextProps 是改变后的值   this.props.xxx 是改变前的值
    * 检测项目中的触发 React路由监听
    * 之后执行 shouldConponentUpdate()  
  

• shouldComponentUpdate()

    * 判断组件是否更新，默认 return true
    * 当 组件中的状态state 改变时直接 触发
    * 组件中的属性 Props改变是间接触发
  

• conponentWillUpdate()

    * 组件即将更新，为更新做准备 ，类似于 Vue 中的 BeforeUpdate()
    * 能获取更新前的数据，更新后的真实Dom 
    * 在此钩子中使用 setState() 会造成死循环
    * 之后在执行 render() 钩子
  

• conponentDidUpdate( prevProps, prevState，snapshot )

   * 组件更新你后触发
   * 可以拿到更新后的数据和 真实Dom
   * 操作动态数据请求 ，实例化第三方库，不过写在此有缺点，会重复实例化。
   * 接受三个参数 第一个参数prevProps是更新之前的props,第二个参数prevState是 更新之前的 state 
   * 如果你用了调用了getSnaSnapshSnapshotBeforeUpdate(),第三个参数是 该钩子函数的返回值，
  
               如果没有调用默认是undefine
  

• getSnapshotBeforeUpdate()

    * 在最近一次渲染输出（提交到 DOM 节点）之前调用
    * 此生命周期的任何返回值将作为参数传递给 conponentDidUpdate()s
  

销毁：

• conponentWillUnMount()

    * 销毁时触发，做善后处理，如定时器的销毁
  

错误处理 ：

• componentDidCatch(error,info)

    * error 是抛出的错误   info是  带有 componentStack key 的对象
  

React16.x版本

React 17.x版本