生命周期和挂载流程

react组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能

生命周期和生命周期函数的关系

• 生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段

• 比如装载阶段（Mount），组件第一次在dom树中被渲染的过程

• 比如更新阶段（Update），组件状态发生变化，重新被渲染的过程

• 比如卸载过程（Unmount），组件从dom树中被移除的过程

• react内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

  • 比如实现componentDidMount函数：组件已经挂载到dom上时，就会回调
  • 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调
  • 比如实现componentWillUnmount函数：组件即将被移除时，就会回调
  • 我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能

我们谈react生命周期时，主要谈的类的生命周期，因为函数式组件是没有生命周期函数的（后面我们可以通过hooks来模拟一些生命周期的回调）

生命周期解析

生命周期函数

constructor

• 如果不初始化state或不进行方法绑定，则不需要为react组件实现构造函数
• constructor中通常只做两件事情：
  • 通过给this.state赋值对象来初始化内部的state
  • 为事件绑定实例（this）

componentDidMount

• componentDidMount（）会在组件挂载后（插入dom树中）立即调用
• componentDidMount中通常进行哪些操作呢？
  • 依赖于dom的操作可以在这里进行
  • 在此处发送网络请求就是最好的地方（官方建议）
  • 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）

componentDidUpdate

• componentDidUpdate（）会在更新后立即被调用，首次渲染不会执行此方法
  • 当组件更新后，可以在此处对dom进行操作
  • 如果你对更新前后的props进行了比较，也可以选择在此处进行网络请求（例如，当props未发生变化时，则不会执行网络请求）

componentWillUnmount

• componentWillUnmount（）会在组件卸载及销毁之前直接调用
  • 在此方法中执行必要的清理操作
  • 例如，清除timer，取消网络请求或清除在component D i的Mount（）中创建的订阅等

不常用的生命周期函数

• getDrivedStateFromProps
• getSnapshotBeforeUpdate
• shouldComponentUpdate