生命周期

很多框架和技术中，都有生命周期=lifecycle=life cycle的概念。

举例

React的生命周期

• React的生命周期
  • 包含
    • Mounting
      • constructor()
      • getDerivedStateFromProps()
      • componentWillMount() / UNSAFE_componentWillMount()
      • render()
      • componentDidMount()
    • Updating
      • componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
      • getDerivedStateFromProps()
      • shouldComponentUpdate()
      • componentWillUpdate() / UNSAFE_componentWillUpdate()
      • render()
      • getSnapshotBeforeUpdate()
      • componentDidUpdate()
    • Unmounting
      • componentWillUnmount()
    • Error Handling
      • componentDidCatch()
  • 详见：
    • State and Lifecycle - React
      • https://reactjs.org/docs/state-and-lifecycle.html
    • React.Component - React
      • https://reactjs.org/docs/react-component.html

Vue.js的生命周期

• Vue.js的生命周期
  • 
• Vue.js实例生命周期的图表
  • 英文
    • 
  • 中文
    • 

Page的Lifecycle

• Page Lifecycle
  • 

生命周期的作用和逻辑

生命周期：

• 就像人的生命，可以（根据不同分类标准，分成）大致几个周期

比如：

根据时间点和年龄段划分，可以分为：

• 出生
• 成长
  • 不同阶段
    • 幼年
    • 青年
    • 中年
    • 老年
  • 异常
    • 疫病
    • 事故
      • 导致受伤、去世
• 死亡

-》

而类似的，比如上述提到的React的生命周期中，对于Component组件来说，也是类似的时间点或时间段去划分的，和人类生命周期有点像的部分周期是：

• Mounting：从出生进入幼年/青年/中年
  • constructor()：出生阶段开始
  • componentWillMount()：将要出生
  • componentDidMount()：已经出生
• Updating：开始展开/活好自己的一生
  • componentWillReceiveProps()：从外部吸收营养==传递参数进来
  • render()：有参数变化就更新显示 -》 活出自己丰富多彩的一生
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()
• Unmounting：人的死亡
  • componentWillUnmount()
• Error Handling：人的生病需要关注和处理和治疗
  • componentDidCatch()