react的生命周期钩子@郝晨光

本人之前写在CSDN上的文章，原创转载至此；react的生命周期钩子

class ComponentA extends React.Component{
   constructor() {
      // 构造函数，在创建组件的时候调用一次。
      // 组件初始化开始
      // 初始化state
   }
   
   getDefaultProps() {
      // 设置默认的props，也可以用dufaultProps设置组件的默认属性。
   }
   
   getInitialState() {
      // 初始化state，可以直接在constructor中定义this.state
   }
   
   componentWillMount() {
      // 组件将要挂载，组件加载时调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state
      // 已经可以读取到state数据
      // 已经在内存中产生虚拟DOM树 但是还没有显示在页面上  
      // Tip1: 不建议在此请求数据，由于请求数据接口一般都是异步，这时候render已经被执行，建议在componentDidMount 数据
      // Tip2: 如果在服务端渲染，该钩子函数将被调用两次，一次服务端，一次浏览器端，而componentDidMount函数只会在浏览器端请求一次
        
   }
   
   render() {
      // react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行
      // Tip：记住，不要在render里面修改state。
   }
   
   componentDidMount() {
      // 所有的组件（包括子组件）在render执行完之后立即调用，并且只会被调用一次。
      // 组件已经初始化完成
      // DOM树渲染完成
      // Tip: 建议在此请求数据
   }
    
   componentWillReceiveProps(nextProps) {
      // props的数据发生改变的时候触发，在该函数内部this.props.属性还没有发生变化，但是可以通过第一个参数nextProps获取到修改之后的props属性
      // 在props被改变时被触发，初始化render时不调用。
      // 旧的属性还是可以通过this.props来获取，在这里通过调用this.setState()来更新你的组件状态。
      // Tip1: 某些情况下，props没变也会触发该钩子函数，需要在方法里手动判断一下this.props和nextProps是否相同，不相同了才执行我的更新方法。
      // Tip2：该函数一般用来更新依赖props的状态
   }
       
    
   shouldComponentUpdate(nextProps, nextState) {
      // 组件接收到新的props或者state时调用，return true就会更新dom（使用diff算法更新），return false能阻止更新（不调用render）
      // 在函数内部state和props还未改变，新的props和state在两个参数内
      // 发生重渲染时，在render()函数调用前被调用的函数，当函数返回false时候，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染。
      // 该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
   }
    
   componentWillUpdate(nextProps, nextState) {
      // shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
      // 数据修改，接着执行render
   }
   
   getSnapshotBeforeUpdate(prevProps, prevState) {
      // 触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法
      // 该函数在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给componentDidUpdate()。
   }
     
   componentDidUpdate(prevProps, prevState) {
       // 数据修改成功，组件更新完成后调用
       // 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
       // 通过prevProps和prevState访问修改之前的props和state
   }
  
   componentWillUnmount() {
       // 在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作，例如解绑定时器，取消网络请求，清理任何在componentDidMount环节创建的DOM元素。
   }
   
   componentDidCatch(error, info) {
       // 该函数称为错误边界，捕捉发生在子组件树中任意地方的JavaScript错误，打印错误日志，并且显示回退的用户界面。
       // Tip：错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。
   }
}

1、React16新的生命周期弃用了componentWillMount、componentWillReceivePorps，componentWillUpdate
2、新增了getDerivedStateFromProps、getSnapshotBeforeUpdate来代替弃用的三个钩子函数（componentWillMount、componentWillReceivePorps，componentWillUpdate）
3、React16并没有删除这三个钩子函数，但是不能和新增的钩子函数（getDerivedStateFromProps、getSnapshotBeforeUpdate）混用，React17将会删除componentWillMount、componentWillReceivePorps，componentWillUpdate
4、新增了对错误的处理（componentDidCatch）

参考文章[1]：https://blog.csdn.net/qq_32899575/article/details/81699357
参考文章[2]：https://segmentfault.com/a/1190000016617400

结言

感谢您的查阅，代码冗余或者有错误的地方望不吝赐教；菜鸟一枚，请多关照