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

生命周期

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

常用的生命周期钩子函数

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

• 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(){//组件销毁时调用该生命周期钩子}