Skip to content

生命周期

· 3 min

本章主要包含以下知识点：

什么是生命周期#

所谓生命周期，指的是组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。

React 在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。

生命周期钩子函数是属于类组件所独有的东西，但是从 React 16.8 推出 Hooks 以来，整体已经开始以函数组件为主，因此这里我们仅介绍一些常用的生命周期钩子函数。

完整的生命周期图谱，可以参阅官网：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

常用的生命周期钩子函数#

有关生命周期钩子函数的介绍，可以参阅官网：https://zh-hans.reactjs.org/docs/react-component.html

官网中在介绍这些钩子函数时，也是分为了常用和不常用两大块来介绍的。

常用的生命周期钩子函数如下：

import React from 'react'


// 类组件
class App extends React.Component {
  constructor() {
    super()
    // 主要做一些初始化操作，例如该组件的状态
    this.state = {
      value: 1,
    }
    console.log('constructor')
  }


  clickHandle = () => {
    this.setState({
      value: this.state.value + 1,
    })
  }


  render() {
    console.log('render')
    return (
      <div>
        <div>{this.state.value}</div>
        <button onClick={this.clickHandle}>+1</button>
      </div>
    )
  }
}


export default App