React学习第三天——生命周期

゜ eVer ㄨ2025-09-27 13:32

生命周期

注意：生命周期钩子函数通常指的是类组件独有的东西

常用的生命周期钩子函数

官网在介绍生命周期也分为了常用和不常用 两大块进行介绍

常用：

constructor 初始化操作
同一个组件对象只会创建一次
不能在挂载页面前，调用setState，为了避免问题，构造函数中严禁使用setState

class App extends React.Component{
constructor(){
super()
//在constructor中进行初始化操作
this.state = {
val: ''
}
}
}
export default App
render
render是整个类组件中必须书写的生命周期方法
返回一个虚拟dom，会被挂载到虚拟dom树，最终渲染到真是dom
render可能不止渲染一次，只要视图更新，render就会重新运行
严禁使用setState，可能会导致无限递归

import React from "react"
class App extends React.Component{
constructor(){
super()
// 主要做初始化操作，例如该组件的状态
this.state = {
val: ''
}
console.log('constructor');
复制代码
```
}
handleClick = () => {
  this.setState({
    val: this.state.val + 1
  })
}
render(){
  /**
   * 会产生递归
   * this.setState({
   *    val: this.state.val + 1
   * })
   */
  console.log('render'); //执行多次
  return (
    <div>
      {this.state.val}
      <button onClick={this.handleClick}>+1</button>
    </div>
  )
}
```
}
export default App
componentDidMount
类似于vue中的mounted
只执行一次
可以使用setState
通常情况，将网络请求，启动计时器等一开始需要的操作，书写咋该函数中

componentDidMount(){
console.log('componentDidMount');
//接下来，发送Ajax亲求，或者绑定计时器等操作
}
componentWillUnmount
通常在该函数中销毁组件依赖的资源，比如计时器

componentWillUnmount(){
//组件销毁时调用该生命周期钩子
复制代码
```
}
```