Notes On React - Two

React 的生命周期

  React组件 的生命周期大致可分成四个状态：
  - Mounting：装配-组件实例被创建和插入 DOM时调用
  - Updating：更新-组件被重新渲染时(属性或状态的改变会触发一次更新)时调用
  - Mounting：卸载-组件被从 DOM 中移除时调用
  - Error Handing：错误处理-在渲染过程中发生错误时调用
  

与生命周期有关的方法

  与 Mounting 有关的方法
   - componentWillMount()/UNSAFE： 装配 发生前被调用，可以在该方法中使用 setState() 来设置 state 而不会被重新渲染，但不推荐使用，而应用 ES6 class 的构造函数 constructor() 来替代。
   - componentDidMount()：组件被 装配 后立刻调用，适合为组件加入数据(如通过网络请求得到的数据)。当该方法中发起了订阅(subscription)，如 addEventListener ；之后要在 componetWillUnmount() 中进行退订，如 removeEventListener 。
  在该方法中调用 setState() 会触发一次额外的渲染，其发生在浏览器刷新屏幕之前；这使得即使 render() 调用了两次而用户也不会看到中间状态。
  
  与 Updating 有关的方法
   - componentWillReceiveProps(nextProps)/UNSAFE： 装配 了的组件接收到新属性前调用(即使新的属性并未发生变化)；该方法并不会被 this,setState() 触发。React 推荐使用 getDerivedStateFromProps() 来替代此方法。
   - shouldComponentUpdate(nextProps, nextState)：组件接收到一个新的 prop 或 state 时被触发(在渲染之前)。该方法返回 true 或 false ，当返回 false 时 componentWillUpdate()，render()，componentDidUpdate() 不会被调用，即组件不会被更新。
  该方法不会在初始化渲染时或使用 froceUpdate() 时被调用。
   - componentWillUpdate(nextProps, nextState)：组件接收到新的 props 或 state 时调用(渲染前)；初始化渲染时不会被调用。
  典型的，该方法可以被 componentDidUpdate() 所替代。如果想在组件 更新 前读取到 DOM 属性(如滚动条的位置)，可以转而使用 getSnapshotBeforeUpdate() 来实现。
   - componentDidUpdate()：组件 更新 完成后立刻被调用。在初始化时不会被调用。该方法适合于 更新 后对 DOM 的操作和重新发送请求。
  
  与 Unmounting 有关的方法
   - componentWillUnmount()：组件正在被 卸载 和注销之前调用；可以在该方法中执行任何必要的清理工作，如解绑定时器，取消订阅，取消网络请求，清理组件之前在 componentDidMount() 中留下的痕迹(如清理创建的DOM元素)。
  
  与 Error Handing 有关的方法
   - componentDidCatch()：定义了该方法后，组件会成为一个 Error boundaries 。通过调用 setState() 来捕捉在 DOM树 中位于其下方的组件的错误( Error boundaries 不能捕捉其内部的错误)。